在HTML5中的一个画布上组合两个图像

Question

我正在使用HTML5 canvas元素。假设我有2个ImageData对象，我希望它们能够放在一个画布上。让我们假设我不关心这些图像是如何结合的。两个ImageData对象都具有完全相同的像素数和形状。

将两张图片合并的最佳方式是什么？

我认为我可以写一个for循环并迭代ImageData数组并手动组合并设置每个像素的每个rgba值，但我想知道是否有更好的方法？我需要尽快完成这项操作。

提前致谢。

Answer 1

如果您只想将一个图像叠加在另一个图像上，您可能想要做这样的事情：

ctx.drawImage(image1, x, y);
// adjust globalAlpha as needed, or skip if the image has its own transparency
ctx.globalAlpha = 0.5;
ctx.drawImage(image2, x, y);

或者，取决于您所追求的具体效果：

ctx.drawImage(image1, x, y);
ctx.globalCompositeOperation = "lighten"; // many other possibilities here
ctx.drawImage(image2, x, y);

这可能比通过get / putImageData方法逐像素绘制更快，但是依赖于浏览器的数量。