HTML Canvas：在没有抗锯齿的情况下绘制图像答案

【问题标题】：HTML Canvas: draw image without anti-aliasingHTML Canvas：在没有抗锯齿的情况下绘制图像
【发布时间】：2010-11-26 10:56:33
【问题描述】：

我想在我的 Canvas 上对一些图像进行像素真实的渲染。现在，我通过 Javascript 获取图像，所以我的图像是 HTMLImageElement 实例。我可以使用drawImage 在 Canvas 的渲染上下文中绘制这些。但是，这会对图像执行抗锯齿，这是我不想要的。

似乎有一种名为putImageData 的较低级别的图像处理方法，对ImageData 对象进行操作。此方法是否执行任何抗锯齿？如果不是，它是我正在寻找的一个很好的候选者，但我还没有找到如何将 HTMLImageElement 转换或 blit 到 ImageData 实例。

欢迎任何建议！

编辑：我最初的问题已解决，我不小心有一个分数坐标，这会强制抗锯齿。不过，转换为图像数据的问题仍然存在。

【问题讨论】：

标签： javascript canvas antialiasing

【解决方案1】：

将图像转换为 ImageData 对象的唯一方法是先将其绘制到画布上，因此您需要创建一个临时画布，在其上绘制图像，然后从那里获取图像数据。

function imageToImageData(image) {
     var canvas = document.createElement("canvas");
     canvas.width = image.width;
     canvas.height = image.height;
     var ctx = canvas.getContext("2d");
     ctx.drawImage(image, 0, 0);
     return ctx.getImageData(0, 0, canvas.width, canvas.height);
}

但请注意，如果您将来自不同域的图像绘制到画布上，同源策略会阻止您调用 getImageData，因此这仅适用于与文档来自同一域的图像。如果您需要从其他域绘制图像，您唯一的选择是直接在主画布的上下文中调用drawImage，确保没有会影响准确性的转换。

【讨论】：

谢谢。我认为这可能是唯一的方法，但我仍在与一些莫名其妙的实施问题作斗争。