Javascript畫布序列化/反序列化？

Question

你可以序列化/反序列化JavaScript中的畫布對象？

Answer 1

您可以通過canvas.getImageData（）和.putImageData（）獲得直接像素訪問。您也可以使用canvas.toDataURL（）將圖像序列化到數據URL以發佈到服務器。

這隻適用於較新的瀏覽器。

Answer 2

除了getImageData方法，您可以使用canvas.toDataURL()來獲取數據URL編碼的PNG。如果您需要序列化爲一個字符串，則無需手動將原始數據轉換爲字符串。您可以通過創建圖像並將src設置爲數據URL來反序列化，然後將其繪製到畫布上。

[編輯，以考慮異步加載（由olliej建議）。]

function serialize(canvas) { 
    return canvas.toDataURL(); 
} 

function deserialize(data, canvas) { 
    var img = new Image(); 
    img.onload = function() { 
     canvas.width = img.width; 
     canvas.height = img.height; 
     canvas.getContext("2d").drawImage(img, 0, 0); 
    }; 

    img.src = data; 
} 

如果我沒有記錯，一些舊版本的Safari，也許歌劇不支持toDataURL，但較新版本做。