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

Question

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

Actuellement, j'ai mon fichier HTML upload :

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. Ensuite, on lui demande de remplir le reste du formulaire. Cette partie fonctionne parfaitement.

Une fois le formulaire complété, l'utilisateur appuie sur un bouton 'Enregistrer'. Une fois ce bouton pressé, j'enregistre toutes les entrées du formulaire en tant que chaînes localStorage. J'ai besoin d'un moyen d'enregistrer également l'image en tant qu'élément localStorage.

Le bouton d'enregistrement les dirigera également vers une nouvelle page. Cette nouvelle page affichera les données de l'utilisateur dans un tableau, avec l'image en haut.

Donc, simplement, j'ai besoin d'enregistrer l'image dans le localStorage une fois que le bouton 'Enregistrer' est pressé, et ensuite de charger l'image sur la page suivante à partir du localStorage.

J'ai trouvé quelques solutions comme ce fiddle et cet article sur moz://a HACKS.

Mais je suis toujours extrêmement confus sur la façon dont cela fonctionne, et j'ai vraiment juste besoin d'une solution simple. Fondamentalement, je dois juste trouver l'image via getElementByID une fois que le bouton 'Enregistrer' est pressé, puis traiter et enregistrer l'image.

Answer 1

À quiconque a également besoin de résoudre ce problème:

Tout d'abord, je récupère mon image avec getElementByID et enregistre l'image en tant que Base64. Ensuite, j'enregistre la chaîne Base64 comme valeur de mon localStorage.

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

Voici la fonction qui convertit l'image en 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 src vide comme ceci:

Et aussitôt que la page se charge, j'utilise ces trois lignes suivantes pour récupérer la chaîne Base64 de localStorage, et l'appliquer à l'image avec le src vide que j'ai créée:

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

Testé dans plusieurs navigateurs et versions différents, et ça semble fonctionner assez bien.

Answer 2

J'ai écrit une petite bibliothèque de 2,2 ko pour enregistrer des images dans localStorage JQueryImageCaching Utilisation :

    $('img').imageCaching();

Answer 3

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

Answer 4

J'ai utilisé une combinaison de la réponse acceptée, du commentaire de James H. Kelly et de l'objet FileReader.

J'ai d'abord stocké l'image téléchargée en tant que chaîne Base64 en utilisant l'objet FileReader:

// get user's uploaded image
const imgPath = document.querySelector('input[type=file]').files[0];
const reader = new FileReader();

reader.addEventListener("load", function () {
    // convert image file to base64 string and save to localStorage
    localStorage.setItem("image", reader.result);
}, false);

if (imgPath) {
    reader.readAsDataURL(imgPath);
}

Ensuite, pour lire à nouveau l'image depuis le localStorage, j'ai simplement fait ce qui suit:

let img = document.getElementById('image');
img.src = localStorage.getItem('image');

Answer 5

document.getElementById('file').addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onloadend = () => {
    // convert file to base64 String
    const base64String = reader.result.replace('data:', '').replace(/^.+,/, '');
    // store file
    localStorage.setItem('wallpaper', base64String);
    // display image
    document.body.style.background = `url(data:image/png;base64,${base64String})`;
  };
  reader.readAsDataURL(file);
});

Exemple CodePen