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

【问题标题】：Combining two images on one canvas in HTML5在 HTML5 的一个画布上组合两个图像
【发布时间】：2010-10-09 00:31:33
【问题描述】：

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

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

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

提前致谢。

【问题讨论】：

“合并”是什么意思？你想让一个掉在另一个上面，这样你就看不到它了吗？你想要一个叠加在另一个之上？您希望它们端到端堆叠吗？
我想把一个放在另一个上面。这些图像中的大多数像素都是完全透明的。因此，如果 image1 的左半边有一个黑色圆圈，而 image2 的右半边有一个正方形，我想将它们组合起来，这样我就得到了 1 张图像，左边有一个圆圈，右边有一个正方形.

标签： javascript html canvas

【解决方案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 方法逐个像素地绘制要快，不过具体程度取决于浏览器。

【讨论】：

提问者说（在稍后的评论中）图像像素大多是透明的，所以我认为甚至不需要设置 alpha 或合成操作。
没错。我将更新第一组代码中的注释。