Fabricjs HTML5 Canvas:为什么图像大小调整得这么差?

Fabricjs HTML5 Canvas: Why are images so poorly resized?(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 画布和抗锯齿

希望对你有帮助.

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