Wie speichere ich ein Bild in localStorage und zeige es auf der nächsten Seite an?

Im Grunde muss ich ein einzelnes Bild hochladen, es in localStorage speichern und es dann auf der nächsten Seite anzeigen.

Derzeit habe ich meine HTML-Datei hochgeladen:

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

Womit diese Funktion verwendet wird, um das Bild auf der Seite anzuzeigen

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

Das Bild wird sofort auf der Seite angezeigt, damit der Benutzer es sehen kann. Sie werden dann gebeten, den Rest des Formulars auszufüllen. Dieser Teil funktioniert perfekt.

Sobald das Formular ausgefüllt ist, klicken sie auf die Schaltfläche "Speichern". Sobald diese Taste gedrückt wird, speichere ich alle Formulareingaben als localStorageZeichenfolgen. Ich brauche eine Möglichkeit, um das Bild auch als localStorageElement zu speichern .

Über die Schaltfläche Speichern werden sie auch auf eine neue Seite weitergeleitet. Auf dieser neuen Seite werden die Benutzerdaten in einer Tabelle angezeigt, wobei sich das Bild oben befindet.

So schlicht und einfach, ich muss das Bild speichern, localStoragesobald die Schaltfläche "Speichern" gedrückt wird, und dann das Bild auf der nächsten Seite von ausleihen localStorage.

Ich habe einige Lösungen wie diese Geige und diesen Artikel bei moz: // a HACKS gefunden .

Obwohl ich immer noch sehr verwirrt bin, wie das funktioniert, und ich wirklich nur eine einfache Lösung brauche. Grundsätzlich muss ich das Bild nur über finden, getElementByIDsobald die Schaltfläche "Speichern" gedrückt wird, und dann das Bild verarbeiten und speichern.

Wer auch dieses Problem lösen muss:

Zuerst greife ich mit meinem Bild zu getElementByIDund speichere es als Base64. Dann speichere ich die Base64-Zeichenfolge als meinen localStorageWert.

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

Hier ist die Funktion, die das Bild in eine Base64-Zeichenfolge konvertiert:

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

Dann habe ich auf meiner nächsten Seite ein Bild mit einem Leerzeichen srcwie folgt erstellt:

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

Und direkt beim Laden der Seite verwende ich diese nächsten drei Zeilen, um die Base64-Zeichenfolge abzurufen localStorageund sie mit dem von srcmir erstellten Leerzeichen auf das Bild anzuwenden :

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

Getestet in einigen verschiedenen Browsern und Versionen, und es scheint ziemlich gut zu funktionieren.

Ich habe eine kleine 2,2-KB-Bibliothek zum Speichern von Bildern in localStorage JQueryImageCaching Usage geschrieben:

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

Sie können das Bild in einen Daten-URI serialisieren. In diesem Blog-Beitrag gibt es ein Tutorial . Dadurch wird eine Zeichenfolge erstellt, die Sie im lokalen Speicher speichern können. Verwenden Sie dann auf der nächsten Seite die Daten-URL als Quelle des Bildes.

"Beachten Sie, dass das Bild zuerst vollständig geladen werden muss (andernfalls werden leere Bilder angezeigt). In einigen Fällen müssen Sie die Behandlung in Folgendes einbinden: bannerImage.addEventListener (" load ", function () {}); - Yuga 1. November 17 um 13:04 "

Dies ist äußerst wichtig. Eine der Optionen, die ich heute Nachmittag untersuche, ist die Verwendung von Javascript-Rückrufmethoden anstelle von addEventListeners, da dies auch nicht richtig zu binden scheint. Es ist wichtig, alle Elemente vor dem Laden der Seite OHNE Seitenaktualisierung vorzubereiten.

Wenn jemand dies erweitern kann, tun Sie dies bitte - wie in, haben Sie ein Settimeout, eine Wartezeit, einen Rückruf oder eine addEventListener-Methode verwendet, um das gewünschte Ergebnis zu erzielen. Welches und warum?

Ich habe das gleiche Problem festgestellt, anstatt Bilder zu speichern, die schließlich den lokalen Speicher überlaufen. Sie können einfach den Pfad zum Bild speichern. etwas wie:

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