Comment enregistrer une image dans localStorage et l'afficher sur la page suivante?
Donc, fondamentalement, je dois télécharger une seule image, l'enregistrer dans localStorage, puis l'afficher sur la page suivante.
Actuellement, j'ai mon téléchargement de fichier HTML:
<input type='file' id="uploadBannerImage" onchange="readURL(this);" />
, Qui utilise cette fonction pour afficher l'image sur la page
function readURL(input)
{
document.getElementById("bannerImg").style.display = "block";
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById('bannerImg').src = e.target.result;
}
reader.readAsDataURL(input.files[0]);
}
}
, L'image s'affiche instantanément sur la page pour que l'utilisateur puisse voir. Ils sont ensuite invités à remplir le reste du formulaire. Cette partie fonctionne parfaitement.
Une fois le formulaire rempli, ils appuient sur un bouton "Enregistrer". Une fois cette le bouton est pressé, j'enregistre toutes les entrées de formulaire en tant que localStorage chaînes. J'ai besoin d'un moyen d'enregistrer également l'image en tant qu'élément localStorage.
Le bouton Enregistrer les dirigera également vers une nouvelle page. Cette nouvelle page affichera les données des utilisateurs dans un tableau, l'image étant en haut.
Si simple et simple, je dois enregistrer l'image dans localStorage Une fois que le bouton 'Enregistrer' est pressé, puis prêter l'image sur la page suivante à partir de localStorage.
, j'ai trouvé quelques solutions telles que ce violon et ce article à moz: / / a HACKS .
Bien que je sois toujours extrêmement confus sur la façon dont cela fonctionne, et je n'ai vraiment besoin que d'une solution simple. Fondamentalement, j'ai juste besoin de trouver l'image via getElementByID Une fois que le bouton' Enregistrer ' est pressé, puis traiter et enregistrer l'image.
4 réponses
À celui qui a aussi besoin de résoudre ce problème:
Tout d'Abord, je prends mon image avec getElementByID et enregistrez l'image en Base64. Ensuite, j'enregistre la chaîne Base64 en tant que valeur localStorage.
bannerImage = document.getElementById('bannerImg');
imgData = getBase64Image(bannerImage);
localStorage.setItem("imgData", imgData);
Voici la fonction qui convertit l'image en une piqûre 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,/, "");
}
Ensuite, sur ma page suivante, j'ai créé une image avec un src vide comme ceci:
<img src="" id="tableBanner" />
Et directement lorsque la page se charge, j'utilise ces trois lignes suivantes pour obtenir la chaîne base64 de localstorage et l'appliquer à la image avec le src vide que j'ai créé:
var dataImage = localStorage.getItem('imgData');
bannerImg = document.getElementById('tableBanner');
bannerImg.src = "data:image/png;base64," + dataImage;
L'a testé dans un bon nombre de navigateurs et de versions différentes et il semble fonctionner assez bien.
J'ai écrit une petite bibliothèque 2,2 kb de sauvegarde d'image dans localStorage JQueryImageCaching Utilisation:
<img data-src="path/to/image">
<script>
$('img').imageCaching();
</script>
Vous pouvez sérialiser l'image dans un URI de données. Il y a un tutoriel dans cet article de blog . Cela produira une chaîne que vous pouvez stocker dans le stockage local. Ensuite, sur la page suivante, utilisez l'uri de données comme source de l'image.
"notez que vous devez d'abord avoir une image complètement chargée (sinon vous finirez par avoir des images vides), donc dans certains cas, vous devrez envelopper la manipulation dans: bannerImage.addEventListener ("load", function () {}); - Yuga Nov 1 '17 à 13: 04"
C'est extrêmement IMPORTANT. L'une des options que j'explore cet après-midi utilise des méthodes de rappel javascript plutôt que addEventListeners car cela ne semble pas non plus se lier correctement. Préparer tous les éléments avant le chargement de la page Sans une actualisation de la page est critique.
Si quelqu'un peut étendre ce programme, veuillez vous n'en avez-vous utilisé un settimeout, une attente, un rappel ou une méthode addEventListener méthode pour obtenir le résultat souhaité. Lequel et pourquoi?