我正在使用context.drawImage.
我已经设法imageSmoothingEnabled = false在 Chrome 30 上禁用平滑（抗锯齿），但图像的外部边界仍然是平滑的。有没有办法也禁用它？
看看下面的小提琴和图像。内部矩形是锯齿状的，但外部不是。
问问题
452 次
1 回答
3
您正在观察的是两个独立的过程组合成您看到的结果。
缩放图像本身的处理与变换图像是分开的。
这意味着图像（在本例中为源画布）被缩放（如果需要），然后才进行imageSmoothingEnabled应用。
来自官方画布文件（编辑草稿）（我的重点）：
如果 imageSmoothingEnabled 属性设置为 true，则用户代理可以使用任何过滤算法在缩放图像数据时对其进行平滑..."
在本节中：
语境 。imageSmoothingEnabled [= 值]
返回是否填充图案，如果必须重新缩放图像，drawImage() 方法将尝试平滑图像，而不是仅渲染像素化图像。
然后是转换矩阵，它将使用平滑来转换所有内容，因为它只知道源像素位置和目标像素位置之间的关系，而不管源是由什么生成的。因此，即使图像本身是在没有任何平滑的情况下绘制的，其结果像素也是转换阶段平滑的目标（您也可以通过任何转换看到这一点）。
要在完全不平滑的情况下完成此操作，您需要自己手动实现转换。这本身并不难，但与内部转换相比，性能成本相对较高。
在特殊情况下，您可能能够根据像素值和阈值过滤掉像素，但是在这两种情况下性能都会受到影响，因为您需要使用 JavaScript 遍历像素。
然而，在这种情况下，它可能是也可能不是一个错误，因为图像的内部（显然）没有平滑，而它的边界是。该错误与未平滑的图像有关，但是因为它假设仅在缩放图像时才平滑图像（如果我能够正确解释文档，但也基于“缩放”的定义方式）。
于 2013-10-25T20:51:56.577 回答