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

Posted 2023-03-05

【中文标题】将许多画布元素保存为图像

【英文标题】：Save many canvas element as image

【发布时间】：2011-04-14 14:46:06

【问题描述】：

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

<div style="position: relative;">
 <canvas id="matix"   
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas id="layer1"   
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas id="layer2"   
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

【问题讨论】：

您希望将它们组合成一张图像，叠放还是并排？

合并为 1 张图像，相互叠加

你是如何实现层的？它们是分开的画布元素吗？第一层是什么矩阵（你的意思是像素数据吗？）？是这样的吗？ ***.com/questions/3008635/…

【参考方案1】：

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

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

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