在HTML5中将两个图像合并到一个画布上

Question

我正在使用HTML5画布元素。假设我有2个ImageData对象，我想将它们组合起来放在一个画布上。假设我不关心这些图像如何组合。两个ImageData对象具有完全相同的像素数和形状。

最好的方法是什么？

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

提前致谢。

- ctown4life

---

“合并”是什么意思？您想让一个覆盖在另一个上面，以便您看不到它吗？您想要一个叠加在另一个上面吗？您想要它们端对端地堆叠吗？ - Chuck

我想把一个图像叠放在另一个上面。这些图像中的大部分像素完全透明。因此，如果image1的左半部分有一个黑色圆圈，而image2的右半部分有一个正方形，我希望将它们组合起来，使得我得到一个具有左侧圆圈和右侧正方形的图像。 - ctown4life

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方法逐像素绘制，这种方法可能更快，但具体速度取决于浏览器。

- C-Mo

---

提问者在后续评论中表示图像像素大多是透明的，因此我认为甚至不需要设置 alpha 或合成操作。 - andrewmu

没错。我会在第一组代码中更新注释。 - C-Mo