Fabricjs HTML5画布：为什么图像缩放效果很差？

Question

9

当我将一张大小为775 x 775的图片添加到fabricjs画布中并将其缩小到约90 x 90时，图片的质量会大大降低。

但是，如果我将同样的图片作为<img/>添加并缩放它，它就能保持原来的质量。

为什么画布图片会变得如此低质量？我该如何使画布图片像<img/>那样保持原始质量？

- bab

我在这里复制了它。http://jsfiddle.net/pVE33/1/ - bab

我无法在您的fiddle上（Chrome 33）重现此问题 - https://www.dropbox.com/s/qs9t0bww6eg5bop/Screenshot%202013-11-25%2011.35.47.png - kangax

很有趣。图像应该是相同的大小。这是我在火狐25.0上看到的- http://i.imgur.com/QNPMfeC.png - bab

2

它们对我来说大小是一样的。我只是调整了大小以显示保留质量（您可以在放大视图中看到它）。但如果问题是“为什么缩小的图像看起来有点像素化”，那就涉及特定浏览器的画布渲染。 - kangax

我可以确认，在使用Chrome 33打开troq提供的jsfiddle链接时，图像会出现像素化。请参阅此处：https://dev59.com/2mMk5IYBdhLWcg3w2BTJ - Rumplin

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user3425836 · Accepted Answer

很可能是反锯齿问题。画布只是一堆像素 - 是否进行抗锯齿取决于您。但是，浏览器在图片缩放时会进行一些抗锯齿处理（请参见此处禁用缩放图像的抗锯齿）。这个问题可能是重复的：Html5 canvas drawImage: how to apply antialiasing 和 HTML5 Canvas and Anti-aliasing。希望能有所帮助。