Comment enregistrer et afficher des images à l'aide de LocalStorage ?

Enregistrement et affichage des images à l'aide de LocalStorage

Question :

Comment puis-je enregistrer une image téléchargée sur localStorage, puis l'afficher sur un prochain page ?

Réponse :

Enregistrement de l'image

1. Récupérez l'élément d'image en utilisant getElementById('bannerImage' ).
2. Convertissez l'image en chaîne Base64 à l'aide de getBase64Image() function :

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. Enregistrez la chaîne Base64 dans localStorage à l'aide de localStorage.setItem("imgData", imgData).

Affichage de l'image

1. Sur la page suivante, créez un élément d'image avec un espace vide Attribut src : .
2. Obtenez la chaîne Base64 de localStorage à l'aide de localStorage.getItem('imgData').
3. Définissez l'attribut src de l'image sur Base64 chaîne : bannerImg.src = "data:image/png;base64", dataImage.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!