Wie kann ich Bilder in localStorage für Web Display speichern und abrufen?

Bilder in localStorage für die Webanzeige speichern und abrufen

Problem:

Wie können Sie Laden Sie ein Bild hoch, speichern Sie es in localStorage und zeigen Sie es anschließend an Seite?

Lösung:

Bild im lokalen Speicher speichern:

1. Erfassen Sie das hochgeladene Bild mit getElementById(' bannerImg').

2. Konvertieren Sie das Bild in eine Base64-Zeichenfolge Verwenden der Funktion getBase64Image():

   var imgData = getBase64Image(bannerImage);

3. Speichern Sie die Base64-Zeichenfolge als localStorage-Wert:

   localStorage.setItem("imgData", imgData);

Abrufen Bild von localStorage und Anzeige auf Weiter Seite:

1. Erstellen Sie auf der neuen Seite ein Bildelement mit einem leeren Quellcode:

   <img src="">

2. Beim Laden der Seite Rufen Sie die Base64-Zeichenfolge aus localStorage ab:

   var dataImage = localStorage.getItem('imgData');

3. Wenden Sie Base64 an Zeichenfolge an das src-Attribut des Bildes:

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

Zusätzliche Überlegungen:

• Die Funktion getBase64Image() konvertiert das Bild in ein Standardmäßig PNG-Format. Sie können bei Bedarf ein anderes Format angeben.
• Diese Lösung ist mit den meisten gängigen Browsern kompatibel. Einige ältere Browser unterstützen jedoch möglicherweise nicht localStorage.

Das obige ist der detaillierte Inhalt vonWie kann ich Bilder in localStorage für Web Display speichern und abrufen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!