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

Question

我正在使用HTML5 canvas元素.假设我有两个想要组合的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方法逐像素绘制更快,但依赖于浏览器的数量.