如何保存和加载HTML5画布到&来自localStorage

How to save and load HTML5 Canvas to & from localStorage?

本文关键字：amp localStorage 来自 HTML5 何保存 保存 加载      更新时间：2024-06-21

我希望用户能够以自定义名称将画布图形保存到localStorage（使用"保存"按钮），然后能够从localStorage加载（使用"加载"按钮）以前的图形。

第一个选项

如果你只想保存一个位图，那么你可以这样保存：

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字符串的大小也会非常大。

第二种选择

如果您想将画布存储为行数组，那么您应该将行坐标存储在某个变量中，并保存它的json:

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

然后您可以加载行数组并重新绘制画布：

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();
});

第一步是从画布中获取图像数据。

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

现在将其存储到stringifying之后的localStorage it:

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);
}

我已经把处理功能的函数放在fidd中。

关于localStorage，你可以阅读这个和这个问题。

相关文章：