Question

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

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

欢迎任何建议！

编辑：我的原始问题已经解决，我不小心有一个小数的坐标，这会强制消除锯齿。转换为图像数据的问题仍然存在。

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，确保没有会影响精度的转换。

HTML Canvas：绘制没有消除锯齿的图像

1 个答案: