Comment puis-je sauvegarder div comme image côté client où div contient un ou plusieurs éléments de canevas HTML5?

Question

L'élément Div 'canvasesdiv' contient trois canevas HTML5.

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

Comment puis-je enregistrer une image combinant toutes les toiles présentes à l'intérieur de la div « canvasesdiv » à côté client en utilisant JavaScript?

Answer 1

Ceci est très similaire à une question précédente que je répondais: save-many-canvas-element-as-image

En résumé: tirer toutes les toiles à l'un d'entre eux et ensuite obtenir l'image via toDataURL()

Answer 2

Je pense que vous devez utiliser la requête Ajax pour certaines opérations côté serveur. Une toile peut être exportée en png en utilisant Apache Batik avec exec('java -jar...')

Le reste est algorithmique.