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

Question

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

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

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

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

Answer 1

您所观察到的是两个独立的过程，并结合到您看到的结果中。

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

这意味着图像（在本例中为源画布）是缩放（如果需要），然后才会应用imageSmoothingEnabled。

来自官方canvas document (editor's draft)（我的重点）：

  

如果imageSmoothingEnabled属性设置为true，则表示该用户   代理可以使用任何过滤算法来平滑图像数据   是缩放 ......“

并在this section中：

  

背景。 imageSmoothingEnabled [= value]

     

返回模式填充和drawImage（）方法是否会尝试   平滑图像如果他们必须重新缩放它们，而不仅仅是   渲染像素化图像。

然后有变换矩阵，它将使用平滑变换所有内容，因为它只知道源像素位置和目标像素位置之间的关系，无论源是由什么生成的。因此，即使在没有任何平滑的情况下绘制图像本身，其结果像素也是转换阶段平滑的目标（您也可以通过任何转换看到这一点）。

要完成此操作而不进行平滑，您需要自己手动实现转换。它本身并不那么难，但与内部转型相比，性能成本相对较高。

在特殊情况下，你可以根据它们的值和阈值过滤掉像素，但是在两种情况下性能都会受到影响，因为你需要使用JavaScript迭代像素。

在这种情况下，它可能是也可能不是一个错误，因为图像的内部（显然）在其边界处是不平滑的。该错误与图像不被平滑有关，但是因为它假设只是在缩放图像时平滑图像（如果我能够正确地解释文档而且还基于“缩放”是如何定义的）。