将画布上的图像保存到本地存储

我试图将绘制的圈子保存到本地存储的画布上，但我根本无法完成它的工作。将画布上的图像保存到本地存储

到目前为止，这是我在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 :)

来源

2013-12-16 Davy Karlsson

“HTMLCanvasElement”中没有'src'属性。您必须将数据网址设置为''。 – Passerby

我只是不能得到它的工作，我以前试过，我现在再试一次，什么也没有。 @Passerby –

@DaveKarlsson你是怎么尝试的？ – Passerby

您必须保存的数据网址加载到一个图像，然后使用drawImage方法将其加载到画布上

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");

来源

2013-12-16 04:58:12 markE

谢谢:)现在工作就像一个魅力。 –

将画布上的图像保存到本地存储

回答

相关问题