保存HTML5畫布內容，包括拖動圖像

Question

我使用畫布加載背景圖像，然後，使用jQuery UI，我調用畫布上的droppable（）函數和draggable（）上的一堆屏幕上的PNG圖像（不在畫布中）。用戶在畫布上拖動一個或多個圖像後，我讓他用下面的函數來保存內容到一個文件：

function saveCanvas() { 
    var data = canvas.toDataURL("image/png"); 
    if (!window.open(data)) { 
     document.location.href = data; 
    } 
} 

這成功地打開帶有圖像的另一個窗口，可悲的是隻包含原始背景圖像，而不是拖動的圖像。我想保存一張展示畫布最後階段的圖像。我在這裏錯過了什麼？

謝謝你的時間。

Answer 1

您必須將圖像繪製到畫布上。

這是一個活生生的例子：

http://jsfiddle.net/6YV88/244/

要嘗試一下，拖動小貓和地方拖放在畫布上（這是小貓廣場之上）。然後再次移動小貓看它已被畫到畫布上。

該示例僅顯示如何將圖像繪製到畫布中。在您的應用中，您不會使用draggablestop方法。相反，在保存時您可以遍歷pngs，將它們繪製到畫布上。請注意，jQuery offset()方法用於確定畫布和圖像相對於文檔的位置。

Answer 2

你是保存畫布的最終狀態。您在畫布頂部有圖像，畫布對它們沒有任何瞭解。

您可以保存所看到的結果的唯一方法是，在致電toDataUrl之前，您必須對每個圖像調用ctx.drawImage，並將它們實際繪製到畫布上。

獲取調用drawImage的正確座標可能會變得棘手，但並非不可能。您可能必須使用圖像的pageX和pageY座標，然後將它們繪製到相對於畫布自己的pageX和pageY的畫布上。