如何禁用JS Canvas外边缘的平滑处理？

Question

我正在使用context.drawImage将一个画布的内容绘制到另一个画布上。

我设法在Chrome 30上使用imageSmoothingEnabled = false来禁用平滑（抗锯齿）功能，但图像的外边界仍然是平滑的。有没有办法来禁用呢？

看看下面的小提琴和图像。内部矩形很好地锯齿状，但外部不是。

http://jsfiddle.net/VzX4Q/2/

Answer 1

你所观察是两个不同的过程组合成你看到的结果。

缩放图像本身的处理与转换图像本身是分开的。

这意味着图像在本例中是源画布，它是，缩放为（如果需要），并且只有imageSmoothingEnabled才适用。

从官方canvas document (editor's draft)（我的强调）：

如果imageSmoothingEnabled属性被设置为真，则用户 代理可以使用任何过滤算法以平滑图像数据，当它 是缩放 ......”

和this section：

上下文。 imageSmoothingEnabled [=值]

返回图案是否填充和的drawImage（）方法将试图 以平滑图像如果他们不得不重新调整它们，而不是仅仅 渲染像素化图像。

然后有一个转换矩阵，它将使用平滑将所有东西转换，因为它只知道源像素位置和目标像素位置之间的关系，而不管源产生的是什么。因此，即使图像本身没有进行平滑绘制，其结果像素也是转换阶段平滑的目标（您也可以通过任何转换查看）。

要与所有你需要手动自己实现转型没有平滑做到这一点。本质上并不难，但与内部转型相比，性能成本相对较高。

在特殊条件下你也许可以根据它们的值，当你需要遍历使用JavaScript像素的阈值，但性能将在这两种情况下命中过滤掉像素。

在这种情况下但也可以是或可以不是作为图像的内部的错误是（显然）不同时它的边界是平滑。该错误将与图像而不是被平滑相关，但因为它被假定为只在缩放图像时平滑图像（如果我能够正确解释文档，但也基于如何定义“缩放”）。