Fabricjs HTML5 Canvas:为什么图像大小调整得这么差?
当我将 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 画布和抗锯齿
希望对你有帮助.
相关文章