我正在使用 HTML5 canvas 元素。假设我有 2 个 ImageData 对象，我想将它们组合起来放在一个 Canvas 上。假设我不关心这些图像如何组合。两个 ImageData 对象具有完全相同的像素数和形状。
合并两个图像的最佳方式是什么？
我认为我可以编写一个 for 循环并遍历 ImageData 数组并手动组合并设置每个像素的每个 rgba 值，但我想知道是否有更好的方法？我需要尽快进行此操作。
提前致谢。
最佳答案
如果您只是想将一张图片叠加在另一张图片之上，您可能想做这样的事情:
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 方法逐像素绘制更快，但速度取决于浏览器。
关于javascript - 在 HTML5 中将两个图像组合在一个 Canvas 上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3878319/