如何将HTML5 Canvas保存到本地存储并加载？

Question

我希望用户能够使用“保存”按钮将画布绘制内容以自定义名称保存到localStorage中，并且可以使用“加载”按钮从localStorage中加载之前的绘图内容。

- user3088233

---

这是我的画布：http://jsfiddle.net/Eyf23/2 - user3088233

https://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/ - Andy

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

第二个选项

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

- Paul

---

我使用了toDataURL()函数，但是出现了一个错误信息：“无法执行'toDataURL'函数，因为涂染画布是不允许导出的”。 - Sajith

@Sajith 很可能是一个安全错误。https://dev59.com/pWEh5IYBdhLWcg3wMA0t#22716873 - 这个答案可能会对你有所帮助。 - Paul

Answer 2

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

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

在将其转换为字符串后，将其存储到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，您可以阅读这个和这个问题。

- TheVillageIdiot