Javascript 将画布中的图像保存到本地存储
我试图将画布上绘制的圆圈保存到localstorage,但根本无法使其工作 到目前为止,这是我在JS中保存的代码Javascript 将画布中的图像保存到本地存储,javascript,html,html5-canvas,local-storage,Javascript,Html,Html5 Canvas,Local Storage,我试图将画布上绘制的圆圈保存到localstorage,但根本无法使其工作 到目前为止,这是我在JS中保存的代码 function saveCanvas() { var canvas = document.getElementById("imgCanvas"), doomslayer = canvas.toDataURL(); if (typeof (localStorage) !== "undefined") { localStorage.setItem('imgCanv
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;
}
终于开始工作了!
必须将保存的数据url加载到图像中,然后使用drawImage将其加载到画布上 IE限制:localStorage仅在服务页面上可用(本地执行不起作用!)
HTMLCanvasElement
中没有src
属性。您必须将数据url设置为
。我只是无法让它工作,我以前试过,现在又试了一次,什么都没有@Passerby@DaveKarlsson你是怎么尝试的?@路人奈维明,终于成功了。:)
// 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");