Wie kann ich ein Bild in localStorage speichern und auf der nächsten Seite anzeigen?

Ein Bild in localStorage speichern und auf der nächsten Seite anzeigen

Ihre Anforderung besteht darin, ein Bild hochzuladen, es in localStorage zu speichern und Zeigen Sie es dann auf einer Folgeseite an. Hier ist eine Lösung, um diesem Bedarf gerecht zu werden:

Speichern des Bildes

Sobald Sie das Bild mit den von Ihnen erwähnten HTML- und JavaScript-Funktionen auf der Seite angezeigt haben, befolgen Sie diese zusätzlichen Schritte Schritte, wenn auf die Schaltfläche „Speichern“ geklickt wird:

1. Rufen Sie das HTML-Element für das Bannerbild mit ab document.getElementById('bannerImg').
2. Konvertieren Sie das Bild mit der unten bereitgestellten getBase64Image-Funktion in einen Base64-String.
3. Speichern Sie den Base64-String als localStorage-Element mit localStorage.setItem("imgData ", imgData).

Funktion zum Konvertieren von Bildern in Base64-Zeichenfolge:

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

Anzeige des Bildes auf der nächsten Seite

Erstellen Sie auf der Folgeseite ein Bild mit einem leeren src-Attribut:

<img src="">

Führen Sie dann die folgenden Zeilen aus, sobald die Seite geladen ist:

1. Abrufen die Base64-Zeichenfolge von localStorage mit var dataImage = localStorage.getItem('imgData').
2. Rufen Sie das HTML-Element für das Tabellenbannerbild mit bannerImg = document.getElementById('tableBanner') ab.

3. Setzen Sie das src-Attribut des Bildes auf Base64 string:

   bannerImg.src = "data:image/png;base64," + dataImage;

Mit diesem Ansatz können Sie das Bild ohne Probleme in localStorage speichern und auf der nächsten Seite anzeigen.

Das obige ist der detaillierte Inhalt vonWie kann ich ein Bild in localStorage speichern und auf der nächsten Seite anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!