web-dev-qa-db-fra.com

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

Donc, en gros, je dois télécharger une seule image, la sauvegarder sur localStorage, puis l’afficher sur la page suivante.

Actuellement, je télécharge mon fichier HTML:

<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 est affichée instantanément sur la page pour que l'utilisateur puisse la voir. Ils sont ensuite invités à remplir le reste du formulaire. Cette partie fonctionne parfaitement.

Une fois le formulaire rempli, ils appuient ensuite sur un bouton "Enregistrer". Une fois que ce bouton est enfoncé, j'enregistre toutes les entrées de formulaire sous la forme de chaînes localStorage. J'ai besoin d'un moyen de sauvegarder également l'image en tant qu'élément localStorage.

Le bouton de sauvegarde les dirigera également vers une nouvelle page. Cette nouvelle page affichera les données des utilisateurs dans un tableau, l’image étant en haut.

Si simple et clair, je dois enregistrer l'image dans localStorage une fois que le bouton 'Enregistrer' est enfoncé, puis prêter l'image de la page suivante de localStorage.

J'ai trouvé des solutions telles que this fiddle et cet article sur moz: // a HACKS .

Bien que je sois encore extrêmement confus sur la façon dont cela fonctionne, je n’ai vraiment besoin que d’une solution simple. Fondamentalement, il me suffit de rechercher l'image via getElementByID une fois que le bouton 'Enregistrer' est enfoncé, puis de traiter et enregistrer l'image.

javascriptjqueryhtmlhtml5local-storage
127
Fizzix

Pour ceux qui ont également besoin de résoudre ce problème:

Premièrement, je saisis mon image avec getElementByID et enregistre l'image au format Base64. Ensuite, je sauvegarde la chaîne Base64 en tant que ma valeur localStorage.

bannerImage = document.getElementById('bannerImg');
imgData = getBase64Image(bannerImage);
localStorage.setItem("imgData", imgData);

Voici la fonction qui convertit l'image en une chaîne Base64:

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,/, "");
}

Ensuite, sur ma page suivante, j'ai créé une image avec un blanc src comme ceci:

<img src="" id="tableBanner" />

Et directement lors du chargement de la page, j’utilise ces trois lignes suivantes pour obtenir la chaîne Base64 de localStorage, et l’applique à l’image avec le blanc src que j’ai créé:

var dataImage = localStorage.getItem('imgData');
bannerImg = document.getElementById('tableBanner');
bannerImg.src = "data:image/png;base64," + dataImage;

Il a été testé dans plusieurs navigateurs et versions différents, et il semble fonctionner assez bien.

179
Fizzix

J'ai écrit une petite bibliothèque d'enregistrement de 2,2kb dans LocalStorage JQueryImageCaching

<img data-src="path/to/image">
<script>
    $('img').imageCaching();
</script>
9
moledet

Vous pouvez sérialiser l'image dans un URI de données. Il y a un tutoriel dans ce article de blog . Cela produira une chaîne que vous pouvez stocker dans un stockage local. Ensuite, sur la page suivante, utilisez les données uri comme source de l’image.

6
Ray Wadkins

"Notez que vous devez d'abord avoir l'image entièrement chargée (sinon vous devez avoir des images vides). Dans certains cas, vous devez alors intégrer la gestion dans: bannerImage.addEventListener (" load ", function () {}); - Yuga 1 novembre 17 à 13:04 "

C'est extrêmement IMPORTANT. L’une des options que j’explore cet après-midi est l’utilisation de méthodes de rappel javascript plutôt que de addEventListeners, dans la mesure où cela ne semble pas se lier correctement non plus. Il est essentiel de préparer tous les éléments avant le chargement de la page SANS une actualisation de la page.

Si quelqu'un peut développer cela, veuillez le faire - comme dans le cas, avez-vous utilisé une méthode settimeout, une attente, un rappel ou une méthode addEventListener pour obtenir le résultat souhaité? Lequel et pourquoi?

0
Andrew Ellison Pembroke

Je suis venu avec le même problème, au lieu de stocker des images, qui finissent par déborder sur le stockage local, vous pouvez simplement stocker le chemin d'accès à l'image. quelque chose comme:

let imagen = ev.target.getAttribute('src');
arrayImagenes.Push(imagen);
0
SebasCiB3R