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

问题描述

我有3层画布 - 1是矩阵，2& 3是图形，如何将它们保存在一个图像中？

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>

推荐答案

$ c> ctx.drawImage（other_canvas，0,0）

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.

如果您要保存图像，可以调用 canvas.toDataURL （）以获取base64编码的PNG文件的内容。

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

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