Javascript Girl
  1. Javascript Girl
  3. Enregistrement et chargement d'une image de localStorage
Intereting Posts
JavaScript dans <head> ou juste avant </ body>? Détecter la mise au point sur la barre d'adresse du navigateur? Comment ajouter un filtre à un sélecteur de fichier dans un lot? Une séquence d'animation non imbriquée dans jQuery? En utilisant Phantom.js évaluer, comment puis-je obtenir le HTML de la page? Supprimez les fichiers sélectionnés avant de télécharger avec Javascript Accès à la variable dans la fonction de rappel … quoi? Réactif – Composants multiples avec les mêmes actions et réducteurs Définir plusieurs valeurs de style.background Fonction d'annulation (p. Ex. "Alerte") et appeler la fonction d'origine? Supprimer la dernière ligne dans le tableau ASP.NET MVC implémenter une utilisation personnalisée de validateur IClientValidatable Node.js & Express session problem Le clonage de matrice multidimensionnelle à l'aide de javascript La boucle d'extraction est terminée avant la fin

Enregistrement et chargement d'une image de localStorage

Donc, essentiellement, j'essaie d'enregistrer une image dans localStorage , puis de charger cette même image sur la page suivante.

J'ai rencontré ce grand exemple: http://jsfiddle.net/8V9w6/

Bien que je n'ai absolument aucune idée de la façon dont cela fonctionne, car je n'ai jamais utilisé localStorage pour des cordes extrêmement petites.

J'ai une image qui se modifie via un téléchargement de fichier géré par jQuery 

 <img id="bannerImg" src="images/image-placeholder.jpg" alt="Banner Image" style="display:none;" width="100%" height="200px" />

Le lien jsfiddle j'ai ajouté ci-dessus permet de télécharger plusieurs fichiers, et c'est certainement ce que je n'aimerais pas avoir.

Ce que je dois savoir, c'est ce que je devrais placer sur la première page pour sauvegarder l'image, et que dois-je placer sur la deuxième page pour charger l'image?

J'ai un bouton de save qui va tout traiter.

Quelque chose comme ça ? 

 var img = new Image(); img.src = 'mypicture.png'; img.load = function() { var canvas = document.createElement('canvas'); document.body.appendChild(canvas); var context = canvas.getContext('2d'); context.drawImage(img, 0, 0); var data = context.getImageData(x, y, img.width, img.height).data; localStorage.setItem('image', data); // save image data };

Obtenez le stockage local sur la deuxième page; Essayez quelque chose comme ceci: 

 window.onload = function() { var picture = localStorage.getItem('image'); var image = document.createElement('img'); image.src = picture; document.body.appendChild(image); };