Javascript 如何将HTML5画布保存并加载到&;从本地存储?
我希望用户能够以自定义名称将画布图形保存到本地存储中(使用“保存”按钮),然后能够从本地存储中加载(使用“加载”按钮)以前的图形。第一步是从画布获取图像数据Javascript 如何将HTML5画布保存并加载到&;从本地存储?,javascript,html,canvas,local-storage,Javascript,Html,Canvas,Local Storage,我希望用户能够以自定义名称将画布图形保存到本地存储中(使用“保存”按钮),然后能够从本地存储中加载(使用“加载”按钮)以前的图形。第一步是从画布获取图像数据 var imageData = myCtxt.getImageData(0,0,WIDTH,HEIGHT); 现在将其存储到localStorage字符串化后的it: localStorage.setItem(savekey, JSON.stringify(idt)); 要读取并设置回数据,可以使用以下命令: var idt = loc
var imageData = myCtxt.getImageData(0,0,WIDTH,HEIGHT);
现在将其存储到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);
}
我已经将处理功能的函数放在了您的中
关于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字符串大小将非常大,即使canvas是空的
第二种选择
如果要将画布存储为lines数组,则应将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();
});
这是我的画布:我使用了toDataURL()。但我收到一个错误“未能在“HtmlCanvaElement”上执行“toDataURL”:可能无法导出受污染的画布”。@Sajith很可能是安全错误这个答案可能对你有帮助。