我正在尝试将 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;
}
现在终于可以使用了! Working fiddle :)
最佳答案
您必须将保存的数据url加载到图像中,然后使用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");
关于javascript - 将 Canvas 中的图像保存到本地存储,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20603222/