将许多画布元素保存为图像 [英] Save many canvas element as image

问题描述

我有 3 层画布 - 1 是矩阵，2 &3是图形，如何保存在一张图片中?

<canvas id="matix" width="100" height="100"style="位置:绝对；左:0；顶部:0；z-index:0；"></canvas><canvas id="layer1" width="100" height="100"style="位置:绝对；左:0；顶部:0；z-index:0；"></canvas><canvas id="layer2" width="100" height="100"style="位置:绝对；左:0；顶部:0；z-index:1；"></canvas>

解决方案

您可以使用 ctx.drawImage(other_canvas,0,0)

将一个画布绘制到另一个画布中

如果您按照正确的顺序执行此操作，您会将所有画布内容正确地分层放置在其中一个中.

如果你想保存图片，你可以调用canvas.toDataURL()来获取base64编码的PNG文件的内容.

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.

这篇关于将许多画布元素保存为图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！