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 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 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, localStorage
sobald 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, getElementByID
sobald die Schaltfläche "Speichern" gedrückt wird, und dann das Bild verarbeiten und speichern.
quelle
Antworten:
Wer auch dieses Problem lösen muss:
Zuerst greife ich mit meinem Bild zu
getElementByID
und speichere es als Base64. Dann speichere ich die Base64-Zeichenfolge als meinenlocalStorage
Wert.Hier ist die Funktion, die das Bild in eine Base64-Zeichenfolge konvertiert:
Dann habe ich auf meiner nächsten Seite ein Bild mit einem Leerzeichen
src
wie folgt erstellt:Und direkt beim Laden der Seite verwende ich diese nächsten drei Zeilen, um die Base64-Zeichenfolge abzurufen
localStorage
und sie mit dem vonsrc
mir erstellten Leerzeichen auf das Bild anzuwenden :Getestet in einigen verschiedenen Browsern und Versionen, und es scheint ziemlich gut zu funktionieren.
quelle
Ich habe eine kleine 2,2-KB-Bibliothek zum Speichern von Bildern in localStorage JQueryImageCaching Usage geschrieben:
quelle
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.
quelle
"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?
quelle
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:
quelle