2

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?

Somnath
  • 3,247
  • 4
  • 28
  • 42

2 Answers2

2

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()

Community
  • 1
  • 1
andrewmu
  • 14,276
  • 4
  • 39
  • 37
-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.

MatTheCat
  • 18,071
  • 6
  • 54
  • 69
  • It’s not an expected answer. Sorry. I don't have any option to do any server side job. And my question is purely about client side. So it does not help me. – Somnath Oct 07 '10 at 10:04