Comment puis-je enregistrer une image sur localStorage et l'afficher sur la page suivante ?

Enregistrer une image dans localStorage et l'afficher sur la page suivante

Votre condition est de télécharger une image, de l'enregistrer dans localStorage et puis affichez-le sur une page suivante. Voici une solution pour répondre à ce besoin :

Enregistrement de l'image

Une fois que vous avez affiché l'image sur la page à l'aide des fonctions HTML et JavaScript que vous avez mentionnées, suivez ces instructions supplémentaires étapes lorsque vous cliquez sur le bouton 'Enregistrer' :

1. Récupérez l'élément HTML de l'image de la bannière en utilisant document.getElementById('bannerImg').
2. Convertissez l'image en chaîne Base64 à l'aide de la fonction getBase64Image fournie ci-dessous.
3. Enregistrez la chaîne Base64 en tant qu'élément localStorage avec localStorage.setItem("imgData ", imgData).

Fonction pour convertir l'image en chaîne Base64 :

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

Affichage de l'image sur la page suivante

Sur la page suivante, créez une image avec un attribut src vide :

<img src="">

Ensuite, exécutez les lignes suivantes une fois la page charges :

1. Récupérez la chaîne Base64 de localStorage en utilisant var dataImage = localStorage.getItem('imgData').
2. Obtenez l'élément HTML pour l'image de la bannière du tableau avec bannerImg = document. getElementById('tableBanner').

3. Définissez le Attribut src à la chaîne Base64 :

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

Cette approche vous permet d'enregistrer l'image dans localStorage et de l'afficher sur la page suivante sans aucun problème.

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!