问题描述
当我将 775 x 775 的图像添加到 fabricjs 画布并将其调整到大约 90 x 90 时，图像的质量会大大降低.
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.
但是，如果我将相同的图像添加为 <img/> 并将其缩小，它会保留其质量.
But if I add that same image as an <img/> and scale it down, it retains its quality.
为什么画布图像变得如此低质量?如何使画布图像像 <img/> 一样保持其原始质量?
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:如何应用抗锯齿
HTML5 画布和抗锯齿
希望对你有帮助.
这篇关于Fabricjs HTML5 Canvas:为什么图像大小调整得这么差?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！