Discussion :

[yotta]

Bonjour,
Je rencontre un problème d'affichage dans mon navigateur Internet Explorer qui ne se produit pas avec FireFox, ni avec Google Chrome ?!
J'essaie de mettre au point un C.V. numérique. J'ai décidé d'organiser la présentation de mon parcours scolaire sous la forme suivante :



Pour réaliser cet affichage, j'emploie javascript et m'appuie sur l'objet HTML5 Canvas. Vous l'avez compris, il s'agit en fait de dessiner une image type jpeg dans le canvas. Donc, j'utilise essentiellement la méthode drawImage. L'appel de mon script nécessite le passage de plusieurs paramètres, dont trois tableaux. Un tableau contenant les dates qui jalonneront le trait, un deuxième tableau qui contient les Urls des images respectives, et un troisième qui contient le texte qui accompagne chaque image. En premier, je dessine le trait, puis je prends les dates extrêmes afin de calculer proportionnellement la position de chaque point ainsi que le texte de la date. Enfin, je fais une première boucle qui dessine les points, les dates, et le texte en dessous de chaque image. Enfin, et c'est là que tout se joue, je crée une variable de type Array pour y stocker des instances de l'objet Image construites à partir des Urls fournies dans le tableau d'Urls passé en paramètre. Dans la boucle qui réalise cela, j'ai pris grand soin de déclarer le compteur i à l'aide du mot clé 'let' pour forcer le navigateur à distinguer chaque valeurs prise par i, sinon, je me retrouve avec x fois la même image. Et j'en profite pour inscrire une écoute d'évenement sur chaque image qui déclenche le dessin des images :

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
16
17
18
19
20
21
22
23
24
25
function experience(etat, destination, dates, largeur, logos, legendes) {
...
...
...
var canvas2 = document.getElementById(destination);
var ctx2 = canvas2.getContext("2d");
var ImagesLogos = new Array(logos.length);
var positions = new Array(dates.length);
// Une boucle calcule les coordonnées x en pixels pour chaque point jalon et les stocke dans positions.
 
 
for (let i = 0 ; i < logos.length ; i++) {
	ImagesLogos[i] = new Image();
	ImagesLogos[i].id = "Img" + i;
	ImagesLogos[i].src = logos[i];
	ImagesLogos[i].onload = function() {
		ctx2.drawImage(ImagesLogos[i], positions[i] + Math.round((positions[i+1]-positions[i])/2) - Math.round(largImg/2), 10, 100, 70);
		}
	}
 
...
...
...
 
}

logos[i] est un des paramètres fournis au script, il représente un tableau de chaîne représentant chacune une URL, celle de l'image. par exemple, logos[0] contient "https://adresseVersMonServeur/CEP_reduit_0.jpg".
Pour une raison que je ne comprends pas, tout se passe à merveille sous FireFox, et sous Chrome, mais sous Internet Explorer 11 les images ne s'affichent pas ???
Lorsque j'invoque la console de débogage du navigateur avec F12, je trouve une erreur javascript qui me signale un type mismatch sur la méthode drawImage ??
Quelqu'un saurait-il me dire ce qui cloche ?

[melka one]

jour

attention au support de let avec ie il faut au moins ie 11

[yotta]

Merci pour votre réponse, Melka One. J'utilise cette version pour mes tests :
Version : 11.0.9600.18538
Version des mises à jour : 11.0.38 (KB3203621)

Et voilà ce que j'obtiens :

[melka one]

et en vidant le cache du navigateur sa peut etre la cause

[Watilin]

D’après ce que j’ai trouvé, TypeMismatchError indique un problème avec le type des images, il faudrait regarder de ce côté. Ça peut vouloir dire que les images sont d’un type qu’IE ne gère pas (mais du jpg, ça m’étonnerait), ou plus probablement qu’il y a quelque chose qui ne va pas avec les valeurs src.

Une chose déjà, pour éviter les problèmes de racing difficiles à déboguer, bien tenir compte du chargement asynchrone des images et mettre le onload = … avant le src = ….

Et je rajouterais des console.log dans tous les coins pour mieux voir ce qui se passe.

Code :

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

1
2
3
4
5
6
7
8
9
10
for (let i = 0 ; i < logos.length ; i++) {
	…
	ImagesLogos[i].onload = function() {
		console.log('logo %d loaded', i);
		ctx2.drawImage(ImagesLogos[i], positions[i] + Math.round((positions[i+1]-positions[i])/2) - Math.round(largImg/2), 10, 100, 70);
	};
	console.log('i =', i);
	console.log('logos[i] =', logos[i]);
	ImagesLogos[i].src = logos[i];
}

[yotta]

Merci pour votre idée, Watilin. J'ai tenté d'inverser les lignes de code pour déclarer le onLoad avant le src, malheureusement, ça ne change rien.
J'ai aussi tenté de faire un

Code :

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

Object.create(Image, ImagesLogos[i])

dans

Code :

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

ctx2.drawImage(ImagesLogos[i]....

, mais ça ne change rien non plus. Ça continue de fonctionner sous Firefox et Chrome, mais ça ne veut rien savoir côté I.E. ?!...
Je n'arrive pas à comprendre d'où vient de TypeMismatch error....