Wie speichere und zeige ich Bilder mit LocalStorage?

Bilder mit LocalStorage speichern und anzeigen

Frage:

Wie kann ich ein hochgeladenes Bild in LocalStorage speichern und dann anzeigen? es auf einem nachfolgenden Seite?

Antwort:

Bild speichern

1. Bildelement mit getElementById('bannerImage') abrufen ).
2. Konvertieren Sie das Bild mit getBase64Image() in einen Base64-String. Funktion:

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

3. Speichern Sie die Base64-Zeichenfolge in localStorage mit localStorage.setItem("imgData", imgData).

Anzeige des Bildes

1. Erstellen Sie auf der nächsten Seite ein Bildelement mit einem Leerzeichen src-Attribut: .
2. Rufen Sie die Base64-Zeichenfolge von localStorage mit localStorage.getItem('imgData') ab.
3. Setzen Sie das src-Attribut des Bildes auf Base64 Zeichenfolge: bannerImg.src = "data:image/png;base64," dataImage.

Das obige ist der detaillierte Inhalt vonWie speichere und zeige ich Bilder mit LocalStorage?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!