HTML画布：如何在不使用反走样的情况下绘制图像

Question

我希望在我的Canvas上进行一些图像的精确渲染。现在，我通过Javascript获取图像，所以我的图像是HTMLImageElement实例。我可以使用drawImage在Canvas的渲染上下文中绘制这些图像。但是，这会对图像执行抗锯齿处理，而我不想要这个效果。

似乎有一个更低级别的图像操作方法叫做putImageData，它操作ImageData对象。这个方法是否执行任何抗锯齿处理？如果没有，那么这个方法就是我正在寻找的优秀候选方案，但是我还没有找到如何将HTMLImageElement转换或复制到ImageData实例的方法。

欢迎任何建议！

编辑：我的原始问题已经解决，我无意中有一个小数坐标，这强制执行抗锯齿处理。但是关于将图像转换为数据的问题仍然存在。

- Wouter Lievens

Answer 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方法，确保没有任何会影响准确性的变换。

- Matthew Crumley

---

谢谢。我想这可能是唯一的方法，但我仍然在与一些难以解释的实现问题作斗争。 - Wouter Lievens