CODEWITHSUNDEEP
javascripthtmlcanvassvgd3.js
Kuan
Kuan

Reputation: 11389

How do I merge two images into one?

What I am doing is converting a chart (HTML for chart legend + SVG for chart body) generated by D3.js into a image, right now I am using both html2canvas and manually convert SVG into image data, the reason is because the html2canvas can only handle the html part and text element inside the SVG.

So my question is:

Once I have both images data (the svg part is like: 'data:image/svg+xml;base64,'+ btoa(svg); (I can turn it into similar data-url by building image object and draw it on canvas ) and html part is from canvas.toDataURL ), how can I merge them together to get the full image

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

I guess canvas may have the ability( overlay mode ) to merge multi-layers, but I can not figure out how to do that. So any code sample is appreciated.

Upvotes: 2

Views: 5549

Answers (1)

Endre Simo
Endre Simo

Reputation: 11541

I think what can you do is to write the image sources into the canvas, then use the canvas composite operation. This way you can overlay the two image using the method which fits best to your needs.

Here are some samples using the globalCompositeOperation

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

Upvotes: 3

Related Questions