Affichage images dans Canvas Internet Explorer
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 :
https://www.bmfamilly.fr/sites/defau...context=node/4
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:
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 ?
