Comment puis-je enregistrer et afficher des images à l'aide de localStorage lors des chargements de pages ?

Enregistrement et affichage des images à l'aide du stockage local lors des chargements de pages

Problème :

Les utilisateurs peuvent télécharger une image, remplissez les entrées du formulaire, enregistrez le formulaire dans localStorage et passez à une nouvelle page. L'objectif est également de sauvegarder l'image téléchargée sur localStorage et de l'afficher sur la page suivante.

Solution :

1. Saisir le Image :

   • Utilisez getElementById pour récupérer l'élément HTML contenant le image.

2. Conversion en Base64 :

   • Définissez une fonction pour convertir l'image en une représentation sous forme de chaîne Base64 à l'aide de Canvas et toDataURL.

3. Enregistrement dans localStorage :

   • Stockez la chaîne Base64 en tant que valeur dans localStorage à l'aide de setItem avec une clé unique.

4. Sur le Page suivante :

   • Créer un élément d'image avec un src vide
   • Récupérez la chaîne Base64 de localStorage à l'aide de getItem.
   • Mettez à jour l'attribut src de l'image pour inclure la chaîne Base64.

5. Exemple Code :

   • Enregistrement dans localStorage :

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

     Copier après la connexion

   • Affichage au suivant page :

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

     Copier après la connexion

Cette solution vous permet d'enregistrer l'image téléchargée sur localStorage en tant que chaîne Base64 et de l'afficher sur une autre page en récupérant la chaîne et en la définissant comme attribut src de l'image.

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!