保存很多畫布元素作爲圖像

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

保存很多畫布元素作爲圖像

回答

相關問題