如何将两个图像合并为一个？

Question

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

所以我的问题是：

一旦我两个图像数据（svg部分就像：'data:image/svg+xml;base64,'+ btoa(svg);（我可以通过构建图像对象将其转换为类似的数据网址并在画布上绘制）和html部分来自canvas.toDataURL），我如何合并他们一起获得完整图片

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

我猜帆布可能具有合并多层的能力（叠加模式），但我无法弄清楚如何做到这一点。所以任何代码示例都表示赞赏。

Answer 1

我认为你能做的是将图像源写入画布，然后使用画布复合操作。这样，您可以使用最符合您需求的方法覆盖两个图像。

以下是使用globalCompositeOperation

的一些示例

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