如何在 localStorage 中保存和加载 HTML5 Canvas？答案

【问题标题】：How to save and load HTML5 Canvas to & from localStorage?如何在 localStorage 中保存和加载 HTML5 Canvas？
【发布时间】：2013-12-28 17:47:11
【问题描述】：

我希望用户能够以自定义名称将画布绘图保存到 localStorage（使用保存按钮），然后能够从本地存储。

【问题讨论】：

这是我的画布：jsfiddle.net/Eyf23/2
hacks.mozilla.org/2012/02/…

标签： javascript html canvas local-storage

【解决方案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 字符串的大小也会非常巨大。

第二个选项

如果要将画布存储为线数组，则应将线坐标存储在某个变量中并保存为 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();
});

【讨论】：

我使用了 toDataURL()。但我收到错误“无法在 'HTMLCanvasElement' 上执行 'toDataURL'：可能无法导出受污染的画布”。
@Sajith 很可能是安全错误。 stackoverflow.com/a/22716873/2731099 - 这个答案可能会对你有所帮助。

【解决方案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);
}

我已将处理功能的函数放在您的 fiddle 中。

关于localStorage，您可以阅读this 和this 问题。

【讨论】：