wake-up-neo.net

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 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 einwandfrei.

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

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

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

Ich fand einige Lösungen wie diese Geige und dieser Artikel bei moz: // a HACKS .

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 getElementByID finden, nachdem die Schaltfläche 'Speichern' gedrückt wurde, und dann das Bild verarbeiten und speichern.

javascriptjqueryhtmlhtml5local-storage
127
Fizzix

Für wen auch immer dieses Problem gelöst werden muss:

Zuerst greife ich mit getElementByID zu meinem Bild und speichere es als Base64. Dann speichere ich den Base64-String als meinen localStorage Wert.

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 leeren src wie folgt erstellt:

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

Und direkt beim Laden der Seite verwende ich diese drei Zeilen, um die Base64-Zeichenfolge aus localStorage abzurufen und sie mit dem von mir erstellten leeren src auf das Bild anzuwenden:

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

Ich habe es in einigen verschiedenen Browsern und Versionen getestet und es scheint ziemlich gut zu funktionieren.

179
Fizzix

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

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

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

6
Ray Wadkins

Msgstr "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 ebenfalls nicht korrekt zu sein scheint. Das Vorbereiten aller Elemente vor dem Laden der Seite OHNE Seitenaktualisierung ist von entscheidender Bedeutung.

Wenn dies erweitert werden kann, führen Sie bitte wie in beschrieben eine Einstellungszeitüberschreitung, eine Wartezeit, einen Rückruf oder eine addEventListener-Methode aus, um das gewünschte Ergebnis zu erzielen. Welches und warum?

0
Andrew Ellison Pembroke

Ich habe dasselbe Problem festgestellt. Statt Bilder zu speichern, die eventuell den lokalen Speicher überlaufen, können Sie einfach den Pfad zum Bild speichern. so etwas wie:

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