Как сохранить div как изображение на стороне клиента, где div содержит один или несколько элементов HTML5 canvas?

Question

Элемент div 'canvasesdiv' содержит три холста 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>

Как сохранить изображение, объединяющее все холсты, присутствующие внутри div 'canvasesdiv' на стороне клиента, с использованием JavaScript?

Answer 1

Это очень похоже на предыдущий вопрос, на который я ответил: копи-много-холст-элемент-как-изображения

В итоге: нарисуйте все полотна на одном из них, а затем получите изображение через toDataURL()

Answer 2

Я думаю, что вы должны использовать Ajax-запрос для некоторых серверных операций. Холст можно экспортировать в png с помощью Apache Batik с exec('java -jar...')

Остальное алгоритмическое.