Comment enregistrer une image dans localStorage et de l'afficher sur la page suivante?

Donc, en gros, j'ai besoin de télécharger une seule image, l'enregistrer pour le localStorage, puis de l'afficher sur la page suivante.

Actuellement, j'ai mon fichier HTML upload:

<input type='file' id="uploadBannerImage" onchange="readURL(this);" />

Qui utilise cette fonction pour afficher l'image sur la page

function readURL(input) 
{
    document.getElementById("bannerImg").style.display = "block";

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            document.getElementById('bannerImg').src =  e.target.result;
        }

        reader.readAsDataURL(input.files[0]);
    }
}

L'image s'affiche instantanément sur la page pour que l'utilisateur puisse voir. Ils sont ensuite invités à remplir le reste du formulaire. Cette partie fonctionne parfaitement.

Une fois que le formulaire est complet, ils ont ensuite appuyez sur un bouton "Enregistrer". Une fois que cette touche est pressée, je enregistrer toutes les entrées d'un formulaire comme localStorage cordes. J'ai besoin d'un moyen de également enregistrer l'image en tant que localStorage élément.

Le bouton enregistrer également les orienter vers une nouvelle page. Cette page affiche les données des utilisateurs dans une table, avec l'image en haut.

Tellement clair et simple, j'ai besoin d'enregistrer l'image dans localStorage une fois le bouton "Enregistrer" est pressé, et alors prêt à l'image sur la page suivante à partir de localStorage.

J'ai trouvé quelques solutions comme ce violon et cet article à moz://un HACKS.

Même si je suis encore extrêmement confus sur la façon dont cela fonctionne, et je n'ai vraiment besoin d'une solution simple. En gros, j'ai juste besoin de trouver l'image via le getElementByID une fois le bouton "Enregistrer" est pressé, puis traiter et enregistrer l'image.

Belle question..........
Quel est le problème avec le stockage de lecteur.résultat dans localstorage comme dans cet exemple: jsfiddle.net/x11joex11/9g8NN?
Pour les personnes qui cherchent à stocker de grandes quantités de données sur localStorage cette bibliothèque est très agréable: pieroxy/lz-chaîne: LZ-basé sur l'algorithme de compression pour le JavaScript

InformationsquelleAutor Fizzix | 2013-10-04

176

À celui qui a aussi besoin de ce problème résolu:

Tout d'abord, je prends mon image avec getElementByID, et enregistrez l'image en Base64. Puis-je enregistrer la chaîne Base64 que mon localStorage valeur.
```
bannerImage = document.getElementById('bannerImg');
imgData = getBase64Image(bannerImage);
localStorage.setItem("imgData", imgData);
```
Ici est la fonction qui convertit l'image en Base64 chaîne:
```
function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
```
Puis, lors de ma prochaine page, j'ai créé une image avec un vide src comme suit:
```
<img src="" id="tableBanner" />
```
Et droit quand le chargement de la page, j'utilise ces trois lignes pour obtenir le Base64 chaîne de localStorage, et de l'appliquer à l'image de la vierge src j'ai créé:
```
var dataImage = localStorage.getItem('imgData');
bannerImg = document.getElementById('tableBanner');
bannerImg.src = "data:image/png;base64," + dataImage;
```
Testé dans un certain nombre de différents navigateurs et versions, et il semble fonctionner assez bien.
- Le Gif n'est pas de soutenir, parce que le gif n'est pas pris en charge par la toile.
- Vous n'avez pas besoin de la getBase64Image fonction. Les données les url sont déjà en base 64 ainsi, lorsque vous appelez le lecteur.readAsDataURL l'e.cible.résultat envoyé pour le lecteur.gestionnaire onload sera tout ce dont vous avez besoin.
- Gardez à l'esprit qu'il ya une limite d'environ 5 mo pour le local/le stockage de session. Et la conversion d'une image binaire à une chaîne encodée en base 64 va faire environ 30% de plus. Donc, ce ne serait pas travailler pour des images haute résolution.
- Pourquoi avez-vous bande de la première partie des données d'url? Pour réduire la taille?
- fait un moment, mais je pense que c'était pourquoi. Complètement facultative, mais.
- Notez que vous devez avoir une image entièrement chargé en premier (sinon se terminant en ayant la vide d'images), de sorte que, dans certains cas, vous auriez besoin d'envelopper la manipulation dans: bannerImage.la méthode addEventListener("load", function () {});
- Cela a fonctionné, mais j'avais besoin d'inclure la largeur de l'image et de la hauteur dans l'appel à ctx.drawImage, c'est à dire, le ctx.drawImage(img, 0, 0, img.largeur, img.la hauteur).
InformationsquelleAutor Fizzix
9

J'ai écrit un peu de 2,2 kb bibliothèque de sauver l'image dans localStorage JQueryImageCaching
Utilisation:
```
<img data-src="path/to/image">
<script>
    $('img').imageCaching();
</script>
```
- 2.2 kilo-octets est énorme pour quelque chose comme cela, en plus je suppose que n'a même pas de facteur de la taille de jQuery lui-même. Je suggère d'écrire sans jQuery, peut-être qu'il sera plus petit
- 1.74 KO selon gitbub
InformationsquelleAutor moledet
6

Vous pourriez sérialiser l'image dans les Data URI. Il y a un tutoriel dans ce post de blog. Qui va produire une chaîne de caractères que vous pouvez stocker dans le local de stockage. Puis sur la page suivante, utilisez les données uri comme la source de l'image.

InformationsquelleAutor Ray Wadkins
0

"Notez que vous devez avoir une image entièrement chargé en premier (sinon se terminant en ayant la vide d'images), de sorte que, dans certains cas, vous auriez besoin d'envelopper la manipulation dans: bannerImage.la méthode addEventListener("load", function () {}); – yuga Nov 1 '17 à 13:04"

C'est extrêmement IMPORTANT. L'une de ces options, je suis à l'exploration de cette après-midi est à l'aide de javascript méthodes de rappel plutôt que addEventListeners puisque ça ne semble pas lier correctement. Obtenir tous les éléments à portée de main avant que la page charge SANS rafraichissement de la page est critique.

Si quelqu'un peut étendre ce programme, veuillez vous n'en avez-vous utilisé un settimeout, une attente, un rappel ou une méthode addEventListener méthode pour obtenir le résultat souhaité. Lequel et pourquoi?

InformationsquelleAutor Andrew Ellison Pembroke
0

J'ai le même problème, au lieu de stocker des images, qui finira par déborder le local de stockage, vous pouvez stocker le chemin d'accès à l'image.
quelque chose comme:
```
let imagen = ev.target.getAttribute('src');
arrayImagenes.push(imagen);
```
InformationsquelleAutor SebasCiB3R

Vous devez vous connecter pour publier un commentaire.