Canvas - 组合两张图片,返回一个 img html 对象?

2022-01-17 00:00:00 canvas html html5-canvas

我有两个具有不同 src url 的 html img 对象.我想合并这两张图片(使用画布),并创建一个合并的 img 对象.

I have two html img objects with different src urls. I'd like to combine these two images (using canvas), and create one merged img object.

这可能吗?怎么样?

推荐答案

您可以在画布上绘制这两个图像,并将它们与您喜欢的任何叠加模式结合起来.要从画布中获取位图数据,您可以使用toDataURL".请注意,这两个图像应与页面来自同一域,否则出于安全原因,您对像素数据的访问将被阻止.

You can draw both images on the canvas and combine them with any overlay mode you like. To get the bitmap data from the canvas you can use 'toDataURL'. Only note that both images should come from the same domain as the page, otherwise your access to the pixel data is blocked for security reasons.

相关文章