画布drawImage质量

Question

这是一个.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上它有点像坏一样.

Answer 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上查看此页面!

Answer 2

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

这是因为图像平滑,默认情况下默认为平滑算法,如画布上的bilinear/trilieaner/bicubic,而您想要的则称为最近邻居.

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

图像平滑最近才被添加到画布规范中,并不是所有浏览器都支持,但是某些浏览器已经实现了此属性的供应商前缀版本.mozImageSmoothingEnabled在Firefox和webkitImageSmoothingEnabledChrome以及Safari中存在上下文,并将这些设置为false将停止发生抗锯齿.不幸的是,在撰写本文时,IE9和Opera尚未实现此属性,供应商前缀或其他.

一般来说,您只需遵循两条规则:

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

其中x | 0地板x很快,但是不会比2,147,483,647较大的数字工作:最大的32位有符号整数.

希望你的坐标不大于那个!