javascript - 如何将两张图片合并为一张？

Question

我正在做的是将 D3.js 生成的图表(图表图例的 HTML + 图表主体的 SVG)转换为图像，现在我正在使用 html2canvas 并手动将 SVG 转换为图像数据，原因是因为html2canvas 只能处理 SVG 中的 html 部分和文本元素。

所以我的问题是:

一旦我有了两个图像数据(svg 部分就像:'data:image/svg+xml;base64,'+ btoa(svg);(我可以通过构建图像对象将其转换为类似的数据 url 并将其绘制在 Canvas 上)和 html 部分来自 canvas.toDataURL )，我如何将它们合并在一起以获得全图

///////////////               ///////////////           ///////////////
/             /               ///////////////           /             /
/             /               ///////////////           /             /
/             /      +        ///////////////   =       /             /
///////////////               ///////////////           ///////////////
///////////////               /             /           /             /
///////////////               ///////////////           ///////////////

我猜 Canvas 可能具有合并多层的能力(叠加模式)，但我不知道该怎么做。因此，任何代码示例都值得赞赏。

Answer 1

我想你能做的就是把图像源写入 Canvas ，然后使用 Canvas 合成操作。这样您就可以使用最适合您需要的方法叠加两个图像。

下面是一些使用 globalCompositeOperation

的示例

http://blogs.adobe.com/webplatform/2014/02/24/using-blend-modes-in-html-canvas/