Enregistrement et chargement d'une image à partir de localStorage

Donc, fondamentalement, je suis en train d'enregistrer une image dans localStoragepuis de charger la même image sur la page suivante.

Je suis tombé sur ce bon exemple: http://jsfiddle.net/8V9w6/

Bien, je n'ai absolument aucune idée de comment cela fonctionne car je n'ai jamais utilisé localStorage pour les très petites chaînes.

J'ai une image qui est changé par l'intermédiaire d'un téléchargement de fichier géré par jQuery

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

La jsfiddle lien que j'ai ajouté ci-dessus permet de télécharger plusieurs fichiers, et c'est certainement quelque chose que je ne voudrais pas avoir.

Ce que j'ai besoin de savoir, c'est que dois-je placer sur la première page pour enregistrer l'image, et que dois-je placer sur la deuxième page pour charger l'image?

J'ai un save bouton qui sera le traitement de tout.

source d'informationauteur Fizzix

  1. 21

    Quelque chose comme cela ?

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

    Obtenir le localStorage sur la deuxième page; essayer quelque chose comme cela:

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