保存很多画布元素作为图像

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

来源

2010-09-20 ErgallM

你想把它们合并为一个图像叠加在彼此顶部还是并排？ – Castrohenge 2010-09-20 13:05:18

合并为一个图像层叠在彼此之上 – ErgallM 2010-09-20 14:04:31

您是如何实现图层的？他们是否分离了画布元素？第一层是什么（你的意思是像素数据？）的矩阵？是这样的吗？ http://stackoverflow.com/questions/3008635/html5-canvas-element-multiple-layers – pepkin88 2010-09-20 14:20:52

可以绘制一个帆布到另一种ctx.drawImage(other_canvas,0,0)

如果你这样做正确的顺序，你将拥有所有在其中的一个正确分层画布内容。

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

来源

2010-09-26 13:31:04 andrewmu

保存很多画布元素作为图像

回答

相关问题