javascript - 将 Canvas 中的图像保存到本地存储

Question

我试图将我在 Canvas 上绘制的圆圈保存到本地存储，但我根本无法让它工作。

到目前为止，这是我在 JS 中的保存代码。

function saveCanvas() {
var canvas = document.getElementById("imgCanvas"),
    doomslayer = canvas.toDataURL();

 if (typeof (localStorage) !== "undefined") {

    localStorage.setItem('imgCanvas', doomslayer);
 } else {
    document.getElementById("save").innerHTML.dataURL = "Local Storage not supported";
   }
}

function loadCanvas() {

var image = localStorage.getItem('imgCanvas');

document.getElementById('imgCanvas').src = image;
}

JSFiddle link

现在终于开始工作了! Working fiddle :)

Answer 1

您必须将保存的数据 url 加载到 Image 中，然后使用 drawImage 将其加载到 Canvas 上

IE 限制:localStorage 仅在服务页面上可用(本地执行不起作用!)。

// save to localStorage

localStorage.setItem("imgCanvas",canvas.toDataURL());

// reload from localStorage

var img=new Image();
img.onload=function(){
    context.drawImage(img,0,0);
}
img.src=localStorage.getItem("imgCanvas");