我需要保存画布中的所有图纸,以便以后能够返回.
我成功获取和放置数据,但我无法保存对象并正确返回.
这是我的代码：
var imgData = a.getImageData(0,500,200);
localStorage.setItem("test",JSON.stringify(imgData))
console.log(imgData)
console.log(JSON.parse(localStorage.getItem("test")))
b.putImageData(imgData,0);
最佳答案
您可以使用canvas.toDataURL()方法,该方法将画布编码为Base64.
原文链接：https://www.f2er.com/jquery/427753.html然后,您可以使用源作为数据URL创建图像,然后将该图像绘制到画布.
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0)";
ctx.fillRect (10,10,55,50);
var url = canvas.toDataURL();
localStorage.setItem('url',url);
var canvas2 = document.getElementById('tutorial2');
var ctx2 = canvas2.getContext("2d");
var toDrawUrl = localStorage.getItem('url');
drawDataURIOnCanvas(toDrawUrl,ctx2);
ctx2.fillStyle = "rgb(200,200,0)";
ctx2.fillRect (20,20,50);
function drawDataURIOnCanvas(strDataURI,context) {
"use strict";
var img = new window.Image();
img.addEventListener("load",function () {
context.drawImage(img,0);
});
img.setAttribute("src",strDataURI);
}
