保存html canvas圖像

我知道這個問題可能已經有了答案，但我還沒有找到它，並且我的項目有一個截止日期。保存html canvas圖像

所以我做了一個html5畫布，我希望能夠用一個（或多個）按鈕做兩件事。我希望用戶能夠通過點擊保存按鈕來保存他剛剛完成的工作，理想情況下我希望下載圖像（而不必右鍵單擊並「保存圖像爲」）。我已經能夠做到這一點）。我還想要保存的圖像（可能是數據庫或服務器？我不知道它是如何工作的），以便繪圖的一部分（或全部，取決於代碼的難度）之前完成的操作在下次別人登錄時使用（不一定是具有相同IP的同一個人）。這可能嗎？

我對代碼和自我教學非常陌生，所以對代碼的任何額外評論以幫助我理解會受到額外的讚賞。

來源

2013-02-23 Lucian_girl

關於第一個任務，可以使用canvas對象支持的toDataUrl方法將畫布內容導出到圖像。

var canvas = document.getElementById("canvas"); 
if (canvas.getContext) { 
    var ctx = canvas.getContext("2d");    // Get the context for the canvas. 
    var myImage = canvas.toDataURL("image/png");  // Get the data as an image. 
} 

var image = document.getElementById("image"); // Get the image object. 
image.src = myImage;

至於第二個任務，在將畫布保存到圖像後，可以使用ajax調用將結果圖像上載到數據庫中。這裏是如何使用它的一個簡單的例子：

$.ajax({ 
     url: "upload.php", 
     type: "POST", 
     data: formdata, 
     processData: false, 
     contentType: false, 
     success: function (res) { 
      document.getElementById("response").innerHTML = res; 
     } 
    });

對於一個完整的例子看到這些文章：

http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/

http://coursesweb.net/ajax/upload-images

來源

2013-02-23 10:33:13