How can I save div as image at client side where div contains one or more than one HTML5 canvas elements?

Question

Div 'canvasesdiv' element contains three HTML5 canvases.

<div style="position: relative; width: 400px; height: 300px;" id="canvasesdiv">
    <canvas width="400" height="300px" style="z-index: 1; position: absolute; left: 0px; top: 0px;" id="layer1" />
    <canvas width="400" height="300px" style="z-index: 2; position: absolute; left: 0px; top: 0px;" id="layer2"/>
    <canvas width="400" height="300px" style="z-index: 3; position: absolute; left: 0px; top: 0px;" id="layer3"/>
</div>

How can I save an image combining all canvases present inside the div 'canvasesdiv' at client side using JavaScript?

Answer 1

I think you have to use Ajax query for some serverside operations. A canvas can be exported in png using Apache Batik with exec('java -jar...')

The rest is algorithmic.

Answer 2

Well HTML5 allows extracting pixel wise data (BMP) information. I found it in a blog http://www.nihilogic.dk/labs/canvas2image/

In my case I have multiple canvases. Let’s think I have collected BMP data of three HTML canvases. Now I can merge the layered BMP information of those three canvases to get the final image. Is it possible? Any Idea?

Answer 3

This is very similar to a previous question that I answered: save-many-canvas-element-as-image

In summary: draw all of the canvases to one of them and then get the image via toDataURL()