如何將兩個圖像合並為一個？

Question

我正在做的是將D3.js生成的圖表（圖表圖例的HTML +圖表主體的SVG）轉換為圖像，現在我同時使用html2canvas和手動將SVG轉換為圖像數據，原因是因為html2canvas可以僅處理SVG內部的html部分和text元素。

所以我的問題是：

一旦我擁有兩個圖像數據 （svg部分就像： 'data:image/svg+xml;base64,'+ btoa(svg); （我可以通過構建圖像對象並將其繪制在畫布上，將其轉換為類似的數據URL） ）和html部分來自canvas.toDataURL ），如何將它們合並在一起以獲得完整圖像

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

我想畫布可能具有覆蓋多層的功能（疊加模式），但是我不知道該怎么做。 因此，感謝任何代碼示例。

Answer 1

我認為您可以做的是將圖像源寫入畫布，然后使用畫布復合操作。 這樣，您可以使用最適合您需要的方法來覆蓋兩個圖像。

這是一些使用globalCompositeOperation示例

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