Fabricjs HTML5 Canvas: Why are images so poorly resized?

别等时光非礼了梦想. 提交于 2019-12-20 12:39:01

问题


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?


回答1:


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.



来源:https://stackoverflow.com/questions/20179284/fabricjs-html5-canvas-why-are-images-so-poorly-resized

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!