【问题标题】: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 那样让画布图像保持其高质量?

标签: html image html5-canvas fabricjs


【解决方案1】:

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

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

Html5 canvas drawImage: how to apply antialiasing

HTML5 Canvas and Anti-aliasing

希望对你有帮助。

【讨论】:

    猜你喜欢
    • 2012-12-05
    • 2013-01-04
    • 2013-07-18
    • 2023-03-22
    • 1970-01-01
    • 2012-10-26
    • 2014-12-27
    • 2013-04-14
    • 2019-06-12
    相关资源
    最近更新 更多