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....

[Watilin]

Et les console.log ont donné quoi ?

[Watilin]

Pour aller dans le sens de Melka One, essaye de retirer let et d’utiliser à la place une fonction éphémère :

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
26
27
28
29
30
31
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 (var i = 0; i < logos.length ; i++) {
    (function (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
        );
      };
    }(i));
  }
 
  ...
  ...
  ...
}

Voir foreach et les collections DOM – pardon si je donne l’impression de me faire de la pub, mais j’ai la flemme de réexpliquer en détails.

[NoSmoking]

Bonjour,
un test à faire est de placer l'image dans une balise <img> et voir si elle est bien affichée.

Dans l'affirmative il faut se servir de celle-ci dans la fonction ctx.drawImage.

[yotta]

Merci pour vos réponses.
Pour ce qui est des logs, j'en ai positionné un suffisamment explicite

Code :

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

console.log(ImagesLogos[i] instanceof Image);

et j'ai eu true pour toutes les réponses. Donc, je manipule bien des objets clairement identifiés en tant qu'image. Ce qui signifie que le TypeMismatch ne concerne pas l'objet image, mais un autre paramètre de la méthode drawImage...
Par contre, je suis beaucoup plus charmé par les explications que vous donnez concernant les manipulations de tableaux/collection. J'ai lu votre lien et appris beaucoup de choses. Je vais de ce pas voir ce que ça donne avec un forEach et vous tiens au courant.

Quand à l'image en elle-même, elle est parfaitement supportée par I.E. puisqu'elle est placée dans le balisage HTML img d'une autre page de mon site où I.E. l'affiche bien.

Comme dit, je vais gratter du côté forEach et je reviens vers vous...

[badaze]

Si logos.length < dates.length il peut y avoir un problème avec i. De plus dans la boucle for il y a à un position[i+1] donc en fin de boucle moment on est > logos.length - 1.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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 (var i = 0; i < logos.length ; i++) {
    (function (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),

[NoSmoking]

Donc pas un problème d'image !

@yotta :
Regarde se que tu as comme valeurs calculée dans cette expression

Code :

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

ctx2.drawImage(ImagesLogos[i], positions[i] + Math.round((positions[i+1]-positions[i])/2) - Math.round(largImg/2), 10, 100, 70);

Nota : tu pourrais remplacer ImagesLogos[i] par this compte tenu de l"écriture.

@Watilin : tu aurais pu également proposer cet article sur DVP

Au passage pourquoi tant de haine envers la collection documents.links, disponibles dans ton les navigateurs en lieu et place de var liens = document.querySelectorAll("a"), ... non c'est pour rire !

[yotta]

Merci pour cette précision badaze, mais ce n'est qu'une illusion d'optique. En effet, il y aura toujours une date de plus qu'il y a de logos puisque chaque logo est encadré par deux dates. Il est donc normal que la longueur de dates soit égale à la longueur de logos + 1.
Quand aux calculs NoSmoking, je ne vois pas le rapport puisqu'ils sont bons pour Firefox et Chrome, par quel bizarrerie surnaturelle ne le seraient-ils pas sous I.E. ?
Mais je crois que je viens de comprendre. D'après MSDN, la méthode drawimage de l'objet HTML5 canvas demande pour représenter l'image un objet DOM img. A priori, il supporterait aussi l'objet ImageBitmap de l'API Canvas. Donc, je vais voir ce que ça donne si je travailles avec un ImageBitmap à la place d'un new Image().
A suivre....

[Loralina]

Bonjour,
Vous faîtes beaucoup de suppositions, pas assez de tests.

Le problème est certainement ici :

Code :

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

1
2
3
for (let i = 0 ; i < logos.length ; i++) {
...
ImagesLogos[i].onload = function() {ctx2.drawImage(ImagesLogos[i],...

La syntaxe passera certes sur Internet Explorer 11, mais "i" n'aura pas la valeur escomptée dans le "onload".
Il suffit d'afficher "i" pour vérifier, l'avez-vous fait ?

Quand aux calculs NoSmoking, je ne vois pas le rapport puisqu'ils sont bons pour Firefox et Chrome, par quel bizarrerie surnaturelle ne le seraient-ils pas sous I.E. ?

Même si ce n'est pas le cas, une opération quelconque aurait pu être interprétée différemment sur Internet Explorer.
Et surtout, quel est le problème de vérifier ? Vous n'avez pas la bonne approche.

[Watilin]

Je +1. Ça ne coûte pas grand chose de mettre des console.log partout, ou de placer un point d’arrêt pour déboguer en pas-à-pas.
Une des choses que le métier de développeur nous apprend, c’est qu’il faut toujours vérifier, même quand on est sûr. Surtout quand on est sûr.

[NoSmoking]

Je ne peux que plussoyer Loralina et Watlin qui plus est quand...

Mais je crois que je viens de comprendre. D'après MSDN, la méthode drawimage de l'objet HTML5 canvas demande pour représenter l'image un objet DOM img.

j'en conclus donc que tu n'as pas suivi mes recommandations faites au post #9, ce qui nous fait en déduire des conclusions fausses.

[yotta]

Tout d'abord, merci pour votre patience. Désolé si je vous ai offensé, c'était bien involontaire.
Ensuite, je vais préciser deux choses :
Je débute dans les technologies dites de développement Web. Il y a encore quelques mois de cela je ne m'étais jamais intéressé à Javascript, ni au fonctionnement des navigateurs. En clair, je découvre un peu tout en même temps et du coup, je ne connaissais pas ces possibilités de debogage. La dernière fois que j'ai développé quelque chose pour le Web, c'était du HTML1 sous I.E. 4. Bref, zéro expérience.
Et je ne connais pas les navigateurs d'aujourd'hui, ça fait très longtemps que je ne me suis pas intéressé à eux alors de là à déboguer il va falloir patienter un peu, le temps que je comprennes comment fonctionne cette interface 'F12'. Mais je vais effectivement ajouter du console.log un peu partout pour y voir plus clair.

En dehors de cela, j'ai fini par procéder comme vous le proposiez NoSmoking. J'ai modifié mon code ainsi :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
	for (let i = 0 ; i < logos.length ; i++) {
		    ImagesLogos[i] = document.createElement('img');
                    ImagesLogos[i].id = "Img" + i;
                    ImagesLogos[i].onload = function() { ctx2.drawImage(ImagesLogos[i], positions[i] + Math.round((positions[i+1]-positions[i])/2) - Math.round(largImg/2), y, largImg, hautImg);}
        	    if ((Math.round(i/2) * 2) == i) ImagesLogos[i].onload = function() {
                        ctx2.drawImage(ImagesLogos[i], positions[i] + Math.round((positions[i+1]-positions[i])/2) - Math.round(largImg/2), yh, largImg, hautImg);
                        }
        	    else ImagesLogos[i].onload = function() {
                        ctx2.drawImage(ImagesLogos[i], positions[i] + Math.round((positions[i+1]-positions[i])/2) - Math.round(largImg/2), yb, largImg, hautImg);
                        }
	            ImagesLogos[i].src = logos[i];
                    }

Et ça ne change malheureusement rien les images refusent toujours de s'afficher avec I.E.
Ce que j'ai remarqué, c'est que W3C préconise dans un exemple d'utilisation d'exploiter l'objet DOM img via la méthode document.getElementById... :

Code :

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

1
2
3
4
5
6
7
Code récupéré sur w3schools
window.onload = function() {
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("scream");
    ctx.drawImage(img,10,10);
};

Ce qui signifie si je ne me trompes pas que ce code va chercher l'image dans le DOM. Seulement voilà, dans mon cas, l'image en question n'existe pas dans le DOM car elle n'est présente nulle part dans la page. Et je ne veux pas la mettre dans la page, je veux juste la dessiner sur le canvas. D'ailleurs, d'un point de vue DOM (si je ne me trompes pas de terme) mon visuel c'est ça :

Code :

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

1
2
<p align="center"><canvas height="200" id="canvas3" width="1100"></canvas></p>
<script>experience(false,"canvas3",["1979","1983","1986","1989","1991"],1100,['https://www.bmfamilly.fr/sites/default/files/CEP_reduit_0.jpg#overlay-context=node/4','https://www.bmfamilly.fr/sites/default/files/CAPBEP_reduit.gif#overlay-context=node/4','https://www.bmfamilly.fr/sites/default/files/BAC_reduit.jpg#overlay-context=node/4','https://www.bmfamilly.fr/sites/default/files/BTS_reduit.jpg#overlay-context=node/4',''], ["Cycle primaire + collèges <br> Certificat d'études","Lycée technique de Schirmeck <br> C.A.P.+B.E.P. Electromécanique","Lycée Couffignale Strasbourg <br> Baccalauréat F3","Lycée Théodore-Deck Guebwiller B.T.S. F3"]);</script>

Donc, je ne vois pas sur quoi je pourrai faire un getElementByID ?

Bref, je vais commencer par mettre en place une fonction éphémère comme me l'a proposé Watilin et j'en profiterai pour faire des logs. Ainsi, cela me permettra d'éviter l'usage de let, qui semble-t'il est connu pour poser des problèmes à I.E.
Si ça ne suffit toujours pas, alors je tenterai ceci :

Code :

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

1
2
3
4
5
Code issu de MDN
ImagesLogos[i].onload = function() {
  Promise.all([createImageBitmap(this, positions[i] + Math.round((positions[i+1]-positions[i])/2) - Math.round(largImg/2), y, largImg, hautImg)]).then(function(images) { ctx.drawImage(images[0], x, y); });
}

Evidemment, je vous tiens au courant des résultats.
Et si le cœur vous en dit : Visitez mon CV avec votre I.E. et sondez par vous-même l'erreur TypeMismatch. Pour l'instant, comme le supposait déjà plus haut Watilin, je penses qu'I.E. ne considère pas mon instance d'objet Image comme étant du bon type. Enfin, c'est ce que je comprends du problème mais pour l'heure, ça ne fonctionne pas. Merci encore de votre investissement.

[Loralina]

Bonsoir,
Problème réglé en deux minutes :
1) J'enregistre la page de votre site (effectivement, on ne voit pas les images sur Internet Explorer).
2) Je récupère la fonction "experience" et j'en fais un copier-coller dans la page html, ce qui redéfinit la fonction.
3) J'affiche "i" dans le "onload", c'est bien ce que je disais : pas la bonne valeur sur Internet Explorer ! Il vaut "ImagesLogos.length" donc forcément l'image "ImagesLogos[i]" n'existe pas.
4) Je fais une petite adaptation et les images s'affichent bien sur Internet Explorer.

Pour ce qui est de la valeur de i, si elle n'était pas 'bonne', j'aurai juste toujours la même image, et je l'aurai quatre fois voilà pourquoi je ne vois pas l'intéret de loguer là-dessus.

Non car "i" vaut "ImagesLogos.length".
Comme je disais, moins de suppositions, plus de tests.

Je vous laisse le soin de corriger votre code.

[yotta]

Merci Loralina, je ne pensais pas que vous interviendriez à cette heure tardive. Pendant votre rédaction, je rédigais de mon côté une nouvelle formulation, celle que vous venez de lire ne me plaisant pas.
Je vais vérifier tout cela de suite...

[yotta]

Un seul mot, bravo. Je suis retourné voir les explications de Watilin sur le principe des fonctions ephémères et j'ai appliqué :

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
      for (var i = 0 ; i < logos.length ; i++) {
          (function(o) {
              ImagesLogos[o] = document.createElement('img');
              ImagesLogos[o].id = "Img" + o;
              ImagesLogos[o].onload = function() {
                  ctx2.drawImage(ImagesLogos[o], positions[o] + Math.round((positions[o+1]-positions[o])/2) - Math.round(largImg/2), y, largImg, hautImg);
                  }
              if ((Math.round(o/2) * 2) == o) ImagesLogos[o].onload = function() {
                  ctx2.drawImage(ImagesLogos[o], positions[o] + Math.round((positions[o+1]-positions[o])/2) - Math.round(largImg/2), yh, largImg, hautImg);
                  }
              else ImagesLogos[o].onload = function() {
                  ctx2.drawImage(ImagesLogos[o], positions[o] + Math.round((positions[o+1]-positions[o])/2) - Math.round(largImg/2), yb, largImg, hautImg);
                  }
              ImagesLogos[o].src = logos[o];
              }(i))}

Merci à vous. En plus, je crois que j'ai compris un peu plus cette histoire de closure. Bonne continuation à vous.