將畫布上的圖像保存到本地存儲

我試圖將繪製的圈子保存到本地存儲的畫布上，但我根本無法完成它的工作。將畫布上的圖像保存到本地存儲

到目前爲止，這是我在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

謝謝:)現在工作就像一個魅力。 –

將畫布上的圖像保存到本地存儲

回答

相關問題