將多個HTML5分層畫布復制到JavaScript中的一張圖像

Question

我有多個HTML5畫布，它們彼此疊放。 順序很重要。 畫布2將放置在畫布1上，依此類推。

a）有沒有一種方法可以創建所有這些畫布的單個圖像（使用toDataURL（）），並保持相同的順序？

b）然后，如何將該圖像復制到剪貼板，以便可以將其粘貼到其他應用程序中？

Answer 1

腳步：

1. 創建一個新的畫布（可能是隱藏的）
2. 將兩個畫布都復制到新畫布
3. 使用canvas.toDataURL()復制到圖像

看到這個小提琴： http : //jsfiddle.net/137f623c/

假設您有3個畫布（2個源和1個合並-如果需要，可以將其隱藏）和一個圖像：

<canvas id="myCanvas1" width="200" height="200"></canvas>
<canvas id="myCanvas2" width="400" height="200"></canvas>

<canvas id="combined" width="400" height="200"></canvas>
<img src="" id="image" />

並且，腳本：

var canvas1 = document.getElementById("myCanvas1");
var ctx1 = canvas1.getContext("2d");
ctx1.fillStyle = "red";
ctx1.fillRect(10,10,100,100);

var canvas2 = document.getElementById("myCanvas2");
var ctx2 = canvas2.getContext("2d");
ctx2.fillStyle = "blue";
ctx2.fillRect(50,50,300,100);

var combined = document.getElementById("combined");
var ctx = combined.getContext("2d");

ctx.drawImage(canvas1, 0, 0); //Copying Canvas1
ctx.drawImage(canvas2, 0, 0); //Copying Canvas2

document.getElementById("image").src = combined.toDataURL()

不要忘了考慮MarkE的答案（針對b部分），並查看瀏覽器之間的兼容性。 就復制而言，我看到大多數現代瀏覽器在單擊鼠標右鍵時均具有“ Copy Image 。 對於舊的瀏覽器，：\\上載到服務器並下載可能是解決方案。

Answer 2

關於您的問題的b）部分...

您將在將合並的畫布內容復制到剪貼板時遇到問題，因為現代瀏覽器尚未統一或很好地支持所需的Clipboard API ：

http://caniuse.com/#feat=clipboard

解決方法是：

1. 將canvas.toDataURL上傳到您的服務器，並將其另存為圖像文件，
2. 從服務器下載該圖像，並將其添加為img元素。

然后，用戶可以right-click-copy img right-click-copy到剪貼板。