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

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()即使canvas是空的,JSON字符串大小也会很大.

第二种选择

如果你想将canvas存储为lines数组,那么你应该在一些变量中存储行coords并保存它的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();
});