Fabricjs HTML5 Canvas：为什么图像调整得太差？

问题描述

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

但是，如果我将相同的图像添加为< img /> 并将其缩小并保留其质量。 $ b

为什么画布图像变得如此低质量？我怎样才能使画布图像保持其原始品质，如< img /> 所做的？

解决方案

它可能会发表评论，但不幸的是，我是新来的，我不能添加评论。
但是，对我来说，它看起来像反锯齿问题。画布只是一堆像素 - 无论您是否进行一些抗锯齿处理，取决于您。不过，浏览器会对图片缩放进行一些抗锯齿（请参阅）。

这个问题可能是以下的重复：

希望它有帮助。

When I add a 775 x 775 image to a fabricjs canvas and resize it down to around 90 x 90, the image greatly loses its quality.

But if I add that same image as an <img/> and scale it down, it retains its quality.

Why does the canvas image become so low quality? How can I make the canvas image retain it's original quality like the <img/> does?

解决方案

It should probably go for a comment, but unfortunately I am new here and I can't add comments.However, to me it looks like antialiasing issue. Canvas is just bunch of pixels - it's up to you whether you do some antialiasing or not. Browsers however do some antialiasing on picture scaling (see here Disable antialising when scaling images).

This question might be a duplicate of:

Html5 canvas drawImage: how to apply antialiasing

HTML5 Canvas and Anti-aliasing

Hope it helps.

这篇关于Fabricjs HTML5 Canvas：为什么图像调整得太差？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！