Discussion :

[rafoim]

Bonjour,

Dans le cadre d'un enseignement que je donne sur le traitement d'images, je donne une page web dans laquelle un script se charge d'afficher des images spécifiques dans des canevas et l'encodage associé ( les étudiants doivent deviner la méthode d'encodage à partir des exemples).
Le souci que je rencontre: même en ajoutant des événements du type onload pour déclencher le script après le chargement des images, j'obtiens encore des images non chargées à l'exécution de ma page. En appuyant plusieurs fois sur F5, je finis par avoir les quatre images chargées mais ce n'est pas très propre.
Comment résoudre ce problème?
Voici mon code js, très redondant par ailleurs ( le code HTML ne contient rien ou presque):

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
let image1 = document.getElementById("monImage1");
let canvas1 = document.getElementById("monCanevas1");
let cadre1 = document.getElementById("cadre1");
let ctx1 = canvas1.getContext("2d");
 
let image2 = document.getElementById("monImage2");
let canvas2 = document.getElementById("monCanevas2");
let cadre2 = document.getElementById("cadre2");
let ctx2 = canvas2.getContext("2d");
 
let image3 = document.getElementById("monImage3");
let canvas3 = document.getElementById("monCanevas3");
let cadre3 = document.getElementById("cadre3");
let ctx3 = canvas3.getContext("2d");
 
let image4 = document.getElementById("monImage4");
let canvas4 = document.getElementById("monCanevas4");
let cadre4 = document.getElementById("cadre4");
let ctx4 = canvas4.getContext("2d");
 
image1.addEventListener('load', function () {
    canvas1.width = image1.width;
    canvas1.height = image1.height;
    ctx1.drawImage(image1, 0, 0);
    let imageDataSource1 = ctx1.getImageData(0, 0, image1.width, image1.height);
    let dataSource1 = imageDataSource1.data;
    let monTexte1 = "";
    dataSource1.forEach(element => {
        monTexte1 += String(element);
        monTexte1 += ";"
    });
    cadre1.innerHTML = monTexte1;
 
})
 
 
 
image2.addEventListener('load', function () {
    canvas2.width = image2.width;
    canvas2.height = image2.height;
    ctx2.drawImage(image2, 0, 0);
    let imageDataSource2 = ctx2.getImageData(0, 0, image2.width, image2.height);
    let dataSource2 = imageDataSource2.data;
    let monTexte2 = "";
    dataSource2.forEach(element => {
        monTexte2 += String(element);
        monTexte2 += ";"
    });
    cadre2.innerHTML = monTexte2;
 
})
 
 
 
image3.addEventListener('load', function () {
    canvas3.width = image3.width;
    canvas3.height = image3.height;
    ctx3.drawImage(image3, 0, 0);
    let imageDataSource3 = ctx3.getImageData(0, 0, image3.width, image3.height);
    let dataSource3 = imageDataSource3.data;
    let monTexte3 = "";
    dataSource3.forEach(element => {
        monTexte3 += String(element);
        monTexte3 += ";"
    });
    cadre3.innerHTML = monTexte3;
})
 
 
image4.addEventListener('load', function () {
    canvas4.width = image4.width;
    canvas4.height = image4.height;
    ctx4.drawImage(image4, 0, 0);
    let imageDataSource4 = ctx4.getImageData(0, 0, image4.width, image4.height);
    let dataSource4 = imageDataSource4.data;
    let monTexte4 = "";
    dataSource4.forEach(element => {
        monTexte4 += String(element);
        monTexte4 += ";"
    });
    cadre4.innerHTML = monTexte4;
})

Merci d'avance

[NoSmoking]

Bonjour,

Le souci que je rencontre: même en ajoutant des événements du type onload pour déclencher le script après le chargement des images,

j'ai du mal à comprendre, tu changes des images dans ton document, via des éléments <img>, puis tu les ré-affiches dans un élément <canvas>, quel est l’intérêt ?

[rafoim]

Je suis désolé de répondre presque un an après. J'avais oublié cette discussion lancée et je présente mes excuses.
Quel est l'intérêt de charger les images puis de les afficher dans un canevas?
C'est pour accéder aux données de l'image et les faire s'afficher: pas moyen de récupérer les valeurs des pixels depuis l'objet Image du HTML à ma connaissance.

Bon, autrement, cette question est ancienne. Je réponds juste par politesse. Depuis, j'ai trouvé des solutions pour améliorer le chargement des images.

Raphaël