Zapisywanie i ładowanie obrazu z localStorage

Question

W zasadzie próbuję zapisać obraz w localStorage, a następnie załadować ten sam obraz na następnej stronie.

natknąłem się na ten wielki przykład: http://jsfiddle.net/8V9w6/

Chociaż mam absolutnie żadnego pojęcia, jak to działa, ponieważ mam tylko kiedykolwiek localStorage ekstremalnie małych strun.

mam obraz, który zostanie zmieniony poprzez przesłanie pliku obsługiwanego przez jQuery

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

Link jsfiddle dodałem powyżej umożliwia przesyłanie wielu plików, a to zdecydowanie coś, czego nie chcieliby mieć.

Co muszę wiedzieć, co powinienem umieścić na pierwszej stronie, aby zapisać obraz i co powinienem umieścić na drugiej stronie, aby załadować obraz?

Mam przycisk save, który będzie przetwarzał wszystko.

Answer 1

Coś takiego?

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 
}; 

Uzyskaj localStorage na drugiej stronie; spróbować czegoś takiego:

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