Chargement d'images vers des canevas
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:
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
