如何將HTML5 Canvas保存到localStorage並從中加載？

Question

我希望用戶能夠以自定義名稱將畫布圖形保存到localStorage （使用“保存”按鈕），然后能夠從localStorage加載（使用“加載”按鈕）以前的圖形。

Answer 1

第一選擇

如果只想保存位圖，則可以通過以下方式保存：

localStorage.setItem(canvasName, canvas.toDataURL());

然后像這樣加載：

var dataURL = localStorage.getItem(canvasName);
var img = new Image;
img.src = dataURL;
img.onload = function () {
    ctx.drawImage(img, 0, 0);
};

我建議使用canvas.toDataURL()而不是ctx.getImageData()因為ctx.getImageData() JSON字符串大小即使畫布為空也將非常大。

第二選擇

如果要將畫布存儲為lines數組，則應將line coords存儲在某個變量中並保存其json：

localStorage.setItem(canvasName, JSON.stringify(linesArray));

然后，您可以加載lines數組並重新繪制畫布：

var lines = JSON.parse(localStorage.getItem(canvasName));
lines.forEach(function (line) {
    ctx.beginPath();
    ctx.strokeStyle = line.color;
    ctx.moveTo(line.x1, line.y1);
    ctx.lineTo(line.x2, line.y2);
    ctx.stroke();
});

Answer 2

第一步將是從畫布獲取圖像數據。

var imageData = myCtxt.getImageData(0,0,WIDTH,HEIGHT);

現在將其stringifying后存儲到localStorage ：

localStorage.setItem(savekey, JSON.stringify(idt));

要讀取並設置數據，可以使用以下命令：

var idt = localStorage.getItem(savekey) || null;
if (idt !== null) {
    var data = JSON.parse(idt);
    ctx.putImageData(idt, 0, 0);
}

我把這些函數用來處理您的小提琴 。

關於localStorage ，你可以讀這個和這個問題。