我想在我的 Canvas 上对一些图像进行像素真实渲染。现在,我通过 Javascript 获取图像,所以我的图像是 HTMLImageElement
实例。我可以使用 drawImage
在 Canvas 的呈现上下文中绘制这些。但是,这会对图像执行抗锯齿,这是我不想要的。
似乎有一个名为 putImageData
的低级图像处理方法,对 ImageData
对象进行操作。此方法是否执行任何抗锯齿?如果不是,它是我正在寻找的一个很好的候选者,但我还没有找到如何将 HTMLImageElement
转换或 blit 到 ImageData
实例。
欢迎任何建议!
编辑:我原来的问题已经解决了,我不小心有一个小数坐标,这会强制抗锯齿。不过,转换为图像数据的问题仍然存在。
最佳答案
将图像转换为 ImageData 对象的唯一方法是先将其绘制到 Canvas 上,因此您需要创建一个临时 Canvas ,在其上绘制图像,并从那里获取图像数据。
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);
}
但请注意,如果您将来自不同域的图像绘制到 Canvas ,同源策略会阻止您调用 getImageData,因此这仅适用于来自与文档相同域的图像。如果您需要从其他域绘制图像,您唯一的选择是直接在主 Canvas 的上下文中调用 drawImage
,确保没有会影响准确性的转换。
关于javascript - HTML Canvas : draw image without anti-aliasing,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1393056/