Wie kann ich Bilder mithilfe von localStorage über mehrere Seitenaufrufe hinweg speichern und anzeigen?

Bilder mithilfe von localStorage über mehrere Seitenaufrufe hinweg speichern und anzeigen

Problem:

Benutzer können Bilder hochladen ein Bild, füllen Sie Formulareingaben aus, speichern Sie das Formular in localStorage und fahren Sie mit einer neuen Seite fort. Ziel ist es, das hochgeladene Bild auch im localStorage zu speichern und auf der nächsten Seite anzuzeigen.

Lösung:

1. Grabbing the Bild:

   • Verwenden Sie getElementById, um das HTML-Element abzurufen, das das enthält Bild.

2. Konvertieren in Base64:

   • Definieren Sie eine Funktion, um das Bild mithilfe von Canvas in eine Base64-String-Darstellung zu konvertieren und toDataURL.

3. Speichern unter localStorage:

   • Speichern Sie die Base64-Zeichenfolge als Wert in localStorage mit setItem mit einem eindeutigen Schlüssel.

4. Auf der Nächste Seite:

   • Erstellen Sie ein Bildelement mit einem leeren Quellcode Attribut.
   • Rufen Sie die Base64-Zeichenfolge aus localStorage mit getItem ab.
   • Aktualisieren Sie das src-Attribut des Bildes so, dass es die Base64-Zeichenfolge enthält.

5. Beispiel Code:

   • Speichern im lokalen Speicher:

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

     Nach dem Login kopieren

   • Wird als Nächstes angezeigt Seite:

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

     Nach dem Login kopieren

Mit dieser Lösung können Sie das hochgeladene Bild als Base64-String in localStorage speichern und durch Abrufen auf einer anderen Seite anzeigen die Zeichenfolge und legt sie als src-Attribut des Bildes fest.

Das obige ist der detaillierte Inhalt vonWie kann ich Bilder mithilfe von localStorage über mehrere Seitenaufrufe hinweg speichern und anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!