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.

[var83]

Un tableau qui contient plusieurs valeurs, des attributs par exemple.

En effet je ne maitrise pas JavaScript et n'ai jamais eu l'occasion de créer un fichier JSON ou d'utiliser localStorage.
J'ai quelques bases, je sais créer un tableau, des variables, des conditions... mais ça s'arrete la.
C'est pourquoi j'ai du mal a mettre tous ça en place.
J'aimerais bien voir un cas concret, c'est pourquoi si si tu pourrais me montrer comment faire ça c'est cool.

[SylvainPV]

Que vient faire un préprocesseur CSS là-dedans ??? Tu avais une fonction JS de dix lignes dans le lien que je t'ai donné pour convertir tes images en base64 à la volée.

Si tu n'as jamais créé de fichier JSON ni utiliser le localStorage, qu'est-ce qui te fait dire qu'il faut absolument utiliser ces trucs là ?

Je te propose qu'on reparte depuis le début parce que là ça mène à rien. Oublie les technos: quel est ton besoin ?

[var83]

Que vient faire un préprocesseur CSS là-dedans

Je suis en train de créer un petit jeu... enfin j'essaie. Donc j'ai des pages HTML/CSS/JS et j'utilise Sass et compass pour générer mes feuille de style c'est tout. Donc pour convertir mes images en b64 je l'ai fait via compass.
Enfin bref, reprenons depuis le debut.


Donc comme je disais je suis en train de créer un petit jeu.

Dans un premier temps l’utilisateur visualise plusieurs petit dessins (environ 30, .png) sur la page d’accueil.
Une fois qu’il les a bien mémoriser il clique sur un bouton pour commencer le jeu.

Maintenant l’utilisateur arrive sur une page avec un canvas composé d’une image de fond (décors) et 4 images/dessin (.png) parmi les images de l’étape précédente. Elle sont placées au dessus du decors. (avec Background-images en b64)

Au debut le canvas est recouvert de gris pour masquer tout ces éléments (décors et images).
Pour te donner une idée ça ressemble a ça: http://jsfiddle.net/ArtBIT/WUXDb/1/ (sauf que dans mon cas j'ai les petit dessins en plus sur l'image de fond et sous la zone grise.

Maintenant l’objectif de l’utilisateur est de faire apparaitre les elements du canvas (decors + images) en effaçant la couleur grise du canvas comme sur le lien ci-dessus.

Lorsqu'il commence a effacer la zone un timer se déclenche et il a environ 5s pour fair apparaitre les éléments.

L’utilisateur est seulement autorisé a tracer une forme rectangulaire, et il perd automatiquement si il dessiner un triangle, un cercle etc.

Aussi il pourra tracer cette forme qu’une seul fois durant le compte a rebours.

Enfin une fois le compte a rebours écoulé l’utilisateur arrive sur une page identique à la premiere (avec toute les images), mais seulement cette fois il devra sélectionner les images qu’il a pu visualiser/reconnu dans la phase du canvas.

En fonction de son choix et de ce qu’il a pu voir, il gagne ou perd :

Si il choisit une image qui est dans le canvas mais qu'il ne l'a pas vu il perd.
Si il choisit une image qui n'est pas dans le canvas il perd.
Si il choisit moins de 4 images il doit sélectionner encore, meme s'il n'a vu que 2 ou 3 images (car 4 images dans le canvas).


Donc je pense qu'il faudrait créer un array avec la liste de tout les dessins (première page).

Stocker les dessins qu'il a pu visualiser sur le canvas dans le localstorage (il faudra comparer les coordonnées x,y effacer sur le canvas et voir si il y a des images sur ces coordonnées pour savoir quelle sont les images que l'utilisateur a vraiment vu).

Enfin remplir un array en fonction de la sélection des quatre images ou pointer sur le premier array (je sais pas trop la).

Puis récupérer les images stocker dans le local storage (image qu'il a vraiment vu) pour les comparer avec l'array de sa sélection.

Résultat si les valeurs sont égal et 4/4 images il gagne. (visualisé 4 et trouvé les 4)
Résultat si les valeurs sont différentes il perd.

Voilà donc je ne sais pas trop comment organiser et surtout enchainer les script ensemble.

[SylvainPV]

Le localStorage sert à stocker des éléments sur le long terme, si l'utilisateur quitte la page par exemple. Dans ton cas, je n'ai pas l'impression que ce soit l'usage que tu en fais. Donc, à moins que tes changements de page sont des changements d'URL sans AJAX, une bête variable en mémoire fera l'affaire.

Après tu peux avoir plusieurs arrays, une qui liste toutes les images, une qui liste les images découvertes, et une qui liste les images sélectionnées. Pour déclarer une array : var array = [element1, element2]; ; n'utilise pas new Array(...), plein de tutos montrent cette syntaxe mais elle pose plein de problèmes et n'apporte rien de plus que l'écriture littérale.

[var83]

Ok, donc j'ai créer trois array comme tu m'as dit, voir code ci-dessous.
Je sais qu'on peut stocker des boolean, des string, ou des nombres dans une array mais qu'en est-il pour les 'src' des images? (ça compte comme une chaine de texte?)
Je peux remplacer 1,2,3,4 par "./img/mon_image_1.png","./img/mon_image_2.png", etc par exemple, ou comment?

Aussi, comment remplir les array 'show' et 'select' puisque les valeurs dépendrons de ce que fait et choisit l'utilisateur?
Que mette dans var show = []; et var select = [];

Si je veux récupérer le résultat de la boucle dois-je alors intégrer tout cela dans une fonction?
Par exemple : function compare(result) { ici le code ci-dessous}

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var img = [1,2,3,4,5];
var show = [];
var select = [];
for (var i = 0; i < select.length; i++) {
    for (var j = 0; j < show.length; j++) {
    	for (var k = 0; k < img.length; k++) {
	        if (select[i] == show[j] == img[k]) {
	             return true;
	        }
	        else {
	             return false;
	        }
	    }
    }
}

[SylvainPV]

Tu peux stocker n'importe quel objet dans une array. ça peut être un nom ou ta string en base64, ou les deux dans un objet. Mais si tu connais toutes les images que tu vas utiliser, pourquoi t'ennuyer avec le base64 pour les comparer ? Donne-leur simplement un nom !

Je comprends pas ce que tu as voulu faire avec ces 3 for, pourquoi comparer avec la liste des images initialement. La double condition a == b == c ne fonctionne pas en JS, il faut écrire a == b && b ==c ; mais ici un seul for et une seule condition devrait suffire (tu boucles sur les sélectionnées et tu vérifies qu'elles sont dans la liste des découvertes avec indexOf)

[var83]

Je comprend pas trop comment faire avec indexOf, je pensais que c'était pour trouver l'emplacement d'un élément spécifique dans le tableau seulement.

[SylvainPV]

Et si tu trouves l'emplacement, tu sais qu'il est dans l'array ou non.

[var83]

Je comprend pas trop comment ca marche c'est bien comme ca :

Code :

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

1
2
3
4
5
6
7
8
9
var show = [1,2,3,4,5];
var select = [2,6,8,9,11];
for(i = 0; i < select.length; i++)  {
      if (show.indexOf(select[i])) {
      	return = true;
      } else {
	return = false;
      }
}

[SylvainPV]

indexOf renvoit -1 si aucun emplacement n'est trouvé, donc ça serait :

Code :

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

1
2
3
if(show.indexOf(select[i]) !== -1){
   // l'image sélectionnée faisait bien partie des images découvertes
}

Et il n'y a pas de = avec l'instruction return

[var83]

Ok super merci!
Je vais utiliser cette méthode plutôt que :

Code :

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

1
2
3
4
5
6
var show = [1,2],
    select = [1,2];
function compare(select, show) {
    return $(select).not(show).length == 0 && $(show).not(select).length == 0
};
$('#result').html(compare(select, show) ? 'true' : 'false');