开发者

Save many canvas element as image

开发者 https://www.devze.com 2023-01-17 07:04 出处:网络
I have 3 layers of canvas - 1 is matrix, 2 & 3 is graphics, how to preserve them in one image? <div style=\"position: relative;\">

I have 3 layers of canvas - 1 is matrix, 2 & 3 is graphics, how to preserve them in one image?

<div style="position: relative;">
 <canvas id="matix" width="100" height="100" 
   style="position: absolute; left: 0; 开发者_如何学编程top: 0; z-index: 0;"></canvas>
 <canvas id="layer1" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas id="layer2" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>


You can draw one canvas into another with ctx.drawImage(other_canvas,0,0)

If you do that in the right order, you will have all the canvas contents correctly layered in one of them.

If you want to save the image, you can call canvas.toDataURL() to get the contents as a base64 encoded PNG file.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号