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

Si vos images continuent d'être rognées, voici un code pour obtenir les dimensions du fichier image avant de le sauvegarder dans le localstorage.

Tout d'abord, je créerais quelques cases d'entrée cachées pour contenir les valeurs de largeur et de hauteur

Ensuite, récupérez les dimensions de votre fichier dans les cases d'entrée

var _URL = window.URL || window.webkitURL;
$("#file-input").change(function(e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function() {
            $("#file-h").val(this.height);
            $("#file-w").val(this.width);
        };
        img.onerror = function() {
            alert( "fichier non valide : " + file.type);
        };
        img.src = _URL.createObjectURL(file);
    }
});

Enfin, modifiez les objets de largeur et de hauteur utilisés dans la fonction getBase64Image() en pointant vers les valeurs de vos cases d'entrée

DE

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

A

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = $("#file-w").val();
    canvas.height = $("#file-h").val();

Aussi, vous devrez maintenir une taille d'environ 300ko pour tous les fichiers. Il existe des publications sur stackoverflow qui traitent de la validation de la taille des fichiers en utilisant Javascript.

Answer 2

"Notez que vous devez d'abord charger complètement l'image (sinon vous risquez d'avoir des images vides), donc dans certains cas, vous devrez envelopper la gestion dans : bannerImage.addEventListener("load", function () {}); - yuga 1 nov. 2017 à 13:04"

C'est extrêmement IMPORTANT. L'une des options que j'explore cet après-midi est d'utiliser des méthodes de rappel JavaScript plutôt que des addEventListeners car cela ne semble pas se lier correctement non plus. Avoir tous les éléments prêts avant le chargement de la page SANS rafraîchissement de la page est crucial.

Si quelqu'un peut développer sur cela s'il vous plaît - par exemple, avez-vous utilisé un settimeout, un wait, une méthode de rappel ou un addEventListener pour obtenir le résultat souhaité. Lequel et pourquoi?

Answer 3

J'ai rencontré le même problème, au lieu de stocker des images, qui finissent par déborder le stockage local, vous pouvez simplement stocker le chemin de l'image. quelque chose comme:

let imagen = ev.target.getAttribute('src');
arrayImagenes.push(imagen);