画布绘制图像质量

Posted 2023-03-05

【中文标题】画布绘制图像质量

【英文标题】：canvas drawImage quality

【发布时间】：2012-10-08 10:28:29

【问题描述】：

这是一个 .png 图像（在右侧），以及我在其上绘制图像的画布元素（在左侧）。你能注意到质量差异吗？ Canvas 以明显的质量损失渲染图像。我们能做什么？

我在 Chrome 和 IE9 上观察到了这个结果。其他人可能会做同样的事情。 我如何渲染图像很常见：在脚本中我创建一个新的 Image() 对象，加载后我调用context.drawImage(myimage, x, y);

编辑：

这是我在画布上观察到的初始图像：

这是我写完后画布呈现的内容：context.drawImage(myimage,parseInt(x),parseInt(y));

我能说什么，好回答的人。最好的锐化。帽子给你了。

EDIT2：

我试过context.drawImage(myimage, parseInt(x) + 0.5, parseInt(y)+ 0.5);，结果如下：

我认为它比第一个更糟糕。我在 chrome 上观察到了这一点，在 IE9 上它有点糟糕。

【问题讨论】：

+1 包括截图和更新结果！ :)

+1 我喜欢丰富多彩的问题

【参考方案1】：

我刚刚创建了两个图像的叠加层，以便它们相互抵消。 它没有用，我在边缘有困难。

请检查您的坐标x, y 是否为整数。 在此处使用浮点数可能会使您的图像模糊，因为某些实现会尝试在“像素之间”渲染它

context.drawImage(myimage, parseInt(x), parseInt(y));

如果这也不起作用，请尝试使用整数值 + 0.5 我知道对于 OpenGL 实现，您必须使用 0.5 的坐标才能击中像素的中心。

context.drawImage(myimage, parseInt(x)+0.5, parseInt(y)+0.5);

---

编辑：

在 html5Rocks 上查看 this page！

【讨论】：

谢谢，我会试一试，结果会回来的

【参考方案2】：

我知道这个问题已经得到解答，但我想提供更多信息来讨论这里发生了什么以及可以做些什么。

---

这是因为图像平滑，默认情况下在画布上使用双线性/trilieaner/bicubic 等平滑算法，而您想要的是最近邻。

该规范最近添加了一个名为imageSmoothingEnabled 的属性，默认为true，并确定在非整数坐标上绘制或按比例绘制的图像是否将使用更平滑的算法。如果将其设置为false，则使用最近邻，生成不太平滑的图像，而只是生成更大的像素。

图像平滑最近才被添加到画布规范中，并非所有浏览器都支持，但一些浏览器已经实现了此属性的供应商前缀版本。在上下文中，Firefox 中存在 mozImageSmoothingEnabled，Chrome 和 Safari 中存在 webkitImageSmoothingEnabled，将它们设置为 false 将停止发生抗锯齿。不幸的是，在撰写本文时，IE9 和 Opera 还没有实现这个属性，无论是供应商前缀还是其他。

一般来说你只需要遵循两条规则：

如果您正在缩放画布，您需要禁用图像平滑或使用最近邻插值对其进行缩放。现在有一些算法可以手动执行此操作，这就是上述选项正在执行的操作。 如果你不是在整数坐标上绘图，你会遇到同样的问题，并且有同样的解决方案。如果您的浏览器上不存在上述选项，您需要恢复为整数坐标(x | 0, y | 0)

其中x | 0 快速楼层x，但不适用于大于 2,147,483,647 的数字：最大的 32 位有符号整数。

希望你的坐标不会比这个大！

【参考方案3】：

我认为这个link 会很有帮助。我做了同样的事情，但在我的情况下，我使用 javascript 动态地给画布重量和高度。然后我在声明时将高度和宽度指定给画布。这样就解决了问题。