如何在 div 包含一个或多个 HTML5 画布元素的客户端将 div 保存为图像?

2022-01-24 00:00:00 image canvas save html client-side

Div 'canvasesdiv' 元素包含三个 HTML5 画布.

如何使用 JavaScript 保存在客户端的 div 'canvasesdiv' 中包含所有画布的图像?

 解决方案 这和我之前回答的一个问题非常相似:save-many-canvas-element-as-image
总而言之:将所有画布绘制到其中之一，然后通过 toDataURL()
 获取图像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?
 解决方案 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()


	
		相关文章