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

第二个选项

如果你想将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();
});

Answer 2

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

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

现在在localStorage之后将其存储到stringifying：

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个问题。

如何将HTML5 Canvas保存并加载到＆amp;来自localStorage？

2 个答案:

第一个选项

第二个选项