Fabricjs HTML5 Canvas：为啥图像大小调整得这么差？

Posted 2023-03-24

【中文标题】Fabricjs HTML5 Canvas：为啥图像大小调整得这么差？

【英文标题】：Fabricjs HTML5 Canvas: Why are images so poorly resized?Fabricjs HTML5 Canvas：为什么图像大小调整得这么差？

【发布时间】：2013-12-09 08:45:56

【问题描述】：

当我将 775 x 775 的图像添加到 fabricjs 画布并将其调整为大约 90 x 90 时，图像的质量会大大降低。

但如果我添加与<img/> 相同的图像并将其缩小，它会保留其质量。

为什么画布图像变得如此低质量？如何使画布图像像<img/> 一样保持其原始质量？

【问题讨论】：

我在这里转载了。 jsfiddle.net/pVE33/1

我无法用你的小提琴重现这个（在 Chrome 33 上）-dropbox.com/s/qs9t0bww6eg5bop/…

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

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

是的，我的问题是“为什么按比例缩小的图像看起来像素化了？”。有没有办法像 html 那样让画布图像保持其高质量？

【参考方案1】：

它可能应该发表评论，但不幸的是我是新来的，我无法添加 cmets。 但是，对我来说，这看起来像是抗锯齿问题。画布只是一堆像素 - 是否进行抗锯齿取决于您。然而，浏览器在图片缩放上做了一些抗锯齿（见这里Disable antialising when scaling images）。

此问题可能与以下问题重复：

Html5 canvas drawImage: how to apply antialiasing

HTML5 Canvas and Anti-aliasing

希望对你有帮助。