Discussion :

[var83]

Bonjour,

Je suis débutant en Javascript.

Est-il possible de récupérer les données de plusieurs images (intégrer en CSS avec background-image) afin de les stocker dans un array avec localstorage?

Puis de comparer ces données avec un autre array afin de repérer les images identique et donc d'afficher se résultat.
Si oui comment faire?

Merci d'avance,

[SylvainPV]

Oui, en les convertissant en base64 :
http://jsfiddle.net/handtrix/YvQ5y/

Cela te donne une représentation sérialisée de l'image en String, qu'on peut stocker en localStorage et comparer à d'autres valeurs. Par contre, il faut que l'image soit rigoureusement la même au bit près pour faire la correspondance.

[var83]

Des images générés par cloudinary sont elles considéré comme des images en base64?
Une fois que j'ai converti les images en base64 je fais comment pour les stocker en localStorage? voici mon code :
Comment faire le lien avec un fichier JSON...

Merci d'avance.

Fichier level1.json :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var animals  = {
  animal1 : "../img/animals/animal_1.png",  // ici mettre les noms de fichiers en base64?
  animal2 : "../img/animals/animal_2.png" // ici mettre les noms de fichiers en base64?
};
var level1_json = JSON.stringify(animals);
sessionStorage.setItem("animals",level1_json);

HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<section id="canvas" class="main"> // les images sont importer via background-images voir css
	<div id="timer" class="clearfix">
		<div class="round-btn">
			<i class="fa fa-clock-o"></i>
		</div>
		<div class="autologouttimer">
			<div id="progressbar" class="color-bar"></div>
		</div>
	</div>
</section>

CSS :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#canvas {
	background-image: url("../img/animals/animal_1.png"),url("../img/animals/animal_2.png"),url("http://res.cloudinary.com/dt4enmvlg/image/upload/c_scale,w_568/v1431781560/howling-mountains_oeqh1m.jpg"); /* ici mettre les fichiers en base64? */
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position: 50% 80%, 50% 20%, top left;
	background-size: 25%, 25%, 100%;
}

[SylvainPV]

Je ne sais pas ce qu'est cloudinary. Mais si tu peux voir l'image sur ton navigateur, alors tu peux la convertir en b64.

je fais comment pour les stocker en localStorage

ben comme pour stocker n'importe quoi d'autre, avec setItem.

Et c'est quoi cette histoire de lien avec un fichier JSON, d'où ça sort ?

[var83]

Ok merci, j'ai réussi a encoder mes images en base64 avec compass.

Pour le JSON, je voudrais récupérer les données de ces fichiers dans un JS pour pouvoir faire une comparaison avec des images qu’un utilisateur aura sélectionné où avec le local storage.
C’est possible non?
Mais je ne sais pas comment faire pour créer des tableaux en JSON (fichier contenant tout les src de plusieurs images) puis comment stoker coté JS dans un autre array les images issue du local storage pour enfin comparer ces deux array et connaitre quel sont les images identique.
Une idée?

[SylvainPV]

Je ne sais pas non plus ce qu'est compass. Tu sors beaucoup de noms d'outils et de technos mais les maîtrises-tu vraiment ? Parce qu'au vu de tes questions j'ai l'impression qu'il te faudrait revoir les bases des langages avant toute autre chose. JSON est un format de sérialisation, donc "créer un tableau en JSON" je ne vois pas trop ce que ça veut dire. Pour échanger avec le localStorage c'est getItem et setItem, y'a pas plus bête et méchant. Enfin pour comparer deux arrays, j'espère que tu sais comment on écrit une boucle et une condition en JS.