Salvataggio e caricamento di un'immagine da localStorage

Question

Quindi, in pratica, sto cercando di salvare un'immagine in localStorage, quindi di caricare la stessa immagine nella pagina successiva.

mi sono imbattuto in questo grande esempio: http://jsfiddle.net/8V9w6/

Anche se, non ho assolutamente idea di come questo funziona da quando ho sempre e solo usato per localStorage estremamente piccole stringhe.

Ho un'immagine che viene modificato attraverso un caricamento di file gestiti da jQuery

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

Il jsfiddle link che ho aggiunto sopra consente a più upload di file, e che è sicuramente qualcosa che non vorrei avere.

Quello che devo sapere è che cosa devo posizionare sulla prima pagina per salvare l'immagine, e cosa dovrei posizionare sulla seconda pagina per caricare l'immagine?

Ho un pulsante save che elaborerà tutto.

Answer 1

Qualcosa di simile?

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

Ottenere il localStorage sulla seconda pagina; provare qualcosa di simile:

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