我需要保存画布中的所有图纸,以便以后能够返回.
我成功获取和放置数据,但我无法保存对象并正确返回.
这是我的代码：
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.
然后,您可以使用源作为数据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);}
