将许多画布元素保存为图像答案

【问题标题】：Save many canvas element as image将许多画布元素保存为图像
【发布时间】：2011-04-14 14:46:06
【问题描述】：

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

<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>

【问题讨论】：

您希望将它们组合成一张图像，叠放还是并排？
合并为 1 张图像，相互叠加
你是如何实现层的？它们是分开的画布元素吗？第一层是什么矩阵（你的意思是像素数据吗？）？是这样的吗？ stackoverflow.com/questions/3008635/…

标签： javascript html canvas

【解决方案1】：

您可以使用ctx.drawImage(other_canvas,0,0) 将一个画布绘制到另一个画布上

如果您以正确的顺序执行此操作，您将在其中一个中正确分层所有画布内容。

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

【讨论】：