HTML5畫布 - 保存和恢復拖放帆布狀態

Question

我有我希望有人的一個問題是能夠幫助...

使用這種JSFIDDLE我能夠動態地創建畫布和拖放所有不同的畫布之間的圖像。

var next = 4 

    function addCanvas() { 
     // create a new canvas element 
     var newCanvas = document.createElement("canvas"); 
     newCanvas.id = "addedcanvases" + next; //added this to give each new canvas a unique id 
     next++; 
     newCanvas.width = canvasWidth; 
     newCanvas.height = canvasHeight; 
     // add a context for the new canvas to the contexts[] array 
     contexts.push(newCanvas.getContext("2d")); 
     // link the new canvas to its context in the contexts[] array 
     newCanvas.contextIndex = contexts.length; 
     // wire up the click handler 
     newCanvas.onclick = function (e) { 
      handleClick(e, this.contextIndex); 
     }; 
     // wire up the mousemove handler 
     newCanvas.onmousemove = function (e) { 
      handleMousemove(e, this.contextIndex); 
     }; 
     // add the new canvas to the page 
     document.body.appendChild(newCanvas); 
    } 

問題：

$("#saveCanvasStates").click(function() { 
    // save canvases and images on them to a database 
}); 

在做一些拖放用戶需要能夠按下「保存」按鈕，在畫布之間滴加完畢（如圖所示JSFIDDLE ），這將將所有畫布的當前狀態保存到數據庫即：

• 保存所有的畫布到數據庫
• 保存一個圖像上畫布

這是爲了讓用戶可以再回來在稍後的時間，並從他們離開地方進行 - 拖放功能仍然有效。

這樣做最好的方法是什麼？因爲在這個特定主題上似乎只有很少的信息/材料，所以你對此的幫助將非常感謝，因爲任何JSFIDDLE示例都會有幫助 - 非常感謝

Answer 1

保存/恢復用戶努力所需的所有信息在你的states []數組中，它包含定義所有拖放項目狀態的JavaScript對象。

其實...

...有關於序列化，傳輸，存儲，檢索和反序列化的JavaScript對象信息的很多;）

序列化的JavaScript對象，請使用JSON.stringify可序列化您的數組將對象轉換爲單個JSON字符串（JSON代表JavaScriptObjectNotation）。這個單個字符串很容易傳輸到您的服務器以發佈到您的數據庫。

要獲取您的狀態信息，您可以要求服務器爲您返回相同的JSON字符串。您可以使用JSON.parse將該JSON字符串轉換回對象數組。

要傳輸和接收您的JSON數據字符串，可以使用jQueries $.ajax方法。 Ajax可以用來發送信息到你的服務器 - 這被稱爲ajax POST。 Ajax可用於請求來自服務器的信息 - 這稱爲ajax GET。

當您的服務器獲取POST請求時，它將採用您提供的JSON字符串並將其保存在數據庫中。

當您的服務器獲取GET請求時，它將查詢數據庫以檢索保存的JSON字符串並將其發送回您的用戶。

建立一個服務器和數據庫超出了一個stackoverflow問題的範圍，但這裏有一個關於如何jQuery，JSON，Ajax，PHP和MySQL數據庫可以一起使用來保存和恢復狀態的一系列教程：

www.youtube.com/watch?v=Yz0RF__mFDU

這裏的客戶端代碼，一個簡單的例子序列化和安置自己的狀態信息：

// Serialize the states array 

var JsonStringForTransport = JSON.stringify({stateForUserNumber7: states}); 

// POST the JSON to your server 

var thePost = $.ajax({ 
    url: 'saveToServer.php', 
    type: 'POST', 
    dataType: 'json', 
    data: JsonStringForTransport, 
    contentType: 'application/json; charset=utf-8' 
}); 

thePost.always(function(result){ 
    // use this during testing to be sure something's happening 
}); 

thePost.fail(function(result){ 
    // handle failure 
}); 

thePost.done(function(result){ 
    // handle success 
}); 

好運氣在您的項目！ :)