Javascript HTML画布：无抗锯齿绘制图像

我想在画布上对一些图像进行像素真实渲染。现在，我通过Javascript获取图像，因此我的图像是

HTMLImageElement

实例。我可以使用

drawImage

在画布的渲染上下文中绘制这些。但是，这会对图像执行消除混叠，这是我不想要的

似乎存在一种名为

putImageData

的较低级别图像处理方法，该方法对

ImageData

对象进行操作。此方法是否执行任何抗锯齿？如果不是的话，它是我所寻找的很好的候选者，但是我还没有找到如何将

HTMLImageElement

转换或blit到

ImageData

实例

欢迎任何建议

---

编辑：我原来的问题解决了，我不小心得到了一个分数坐标，这会强制消除混叠。转换为图像数据的问题仍然存在。

将图像转换为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

，确保没有影响准确性的转换。

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