保存多个画布元素为图像

Question

我有三层画布 - 一层是矩阵，第二层和第三层是图形，如何将它们保存在一个图像中？

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

- ErgallM

---

你想把它们合并成一张图层叠在一起还是并排放置？ - Castrohenge

组合成一个图像，分层堆叠在一起。 - ErgallM

你是如何实现图层的？它们是分离的画布元素吗？第一层是什么矩阵（你是指像素数据吗？）？类似于这样的东西吗？https://dev59.com/WXA75IYBdhLWcg3w9-Ox - pepkin88

Answer 1

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

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

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

- andrewmu