保存和加載本地存儲的圖像

Question

所以基本上，我試圖將圖像保存到localStorage，然後在下一頁加載相同的圖像。

我遇到了這個很好的例子：http://jsfiddle.net/8V9w6/

雖然，我完全不知道如何工作的，因爲我只使用過的localStorage爲極小的字符串。

我有一個被通過的jQuery

<img id="bannerImg" src="images/image-placeholder.jpg" alt="Banner Image" style="display:none;" width="100%" height="200px" /> 

的jsfiddle鏈接我在上面添加允許多文件上傳處理的文件上傳變化的圖像，這是肯定的東西我不希望有。

我需要知道的是我應該放置在第一頁上以保存圖像，我應該在第二頁上放置什麼圖像以加載圖像？

我有一個save按鈕，它將處理所有內容。

Answer 1

像這樣的東西？

var img = new Image(); 
img.src = 'mypicture.png'; 
img.load = function() { 
var canvas = document.createElement('canvas'); 
document.body.appendChild(canvas); 
var context = canvas.getContext('2d'); 
context.drawImage(img, 0, 0); 
var data = context.getImageData(x, y, img.width, img.height).data; 
localStorage.setItem('image', data); // save image data 
}; 

獲取第二頁上的localStorage;嘗試是這樣的：

window.onload = function() { 
var picture = localStorage.getItem('image'); 
var image = document.createElement('img'); 
image.src = picture; 
document.body.appendChild(image); 
};