如何在客户端将div保存为图像，其中div包含一个或多个HTML5画布元素？ [英] How can I save div as image at client side where div contains one or more than one HTML5 canvas elements?

问题描述

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

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>

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

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

推荐答案

这与我之前回答的问题非常相似：
save-many-canvas-element-as-image

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

总之：将所有画布绘制到其中一个画布，然后通过 toDataURL（）

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

这篇关于如何在客户端将div保存为图像，其中div包含一个或多个HTML5画布元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！