Chargement image lors de la création d'un objet

Bonjour, j'arrive pas à m'y faire aux objets !

J'ai beau avoir essayé de comprendre les exemples donnés par Archimède, No Smoking, ASCIIDEFOND, et d'autres gars sympas dont j'ai plus le nom en tête, bein je suis toujours aussi nul.

J'essaie par exemple de charger une image lors de la création d'un objet vehicule, mais le onload de l'image ne se fait pas alors qu'il possède bien son SRC.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

class CVehicule{ constructor(Nom, Type, Fichier, X, Y, W, H){ this.Nom=Nom; this.Type=Type; this.Image=new Image(); this.Image.SRC=Fichier; this.Image.onload=function(e){ const objImg=e.target; this.W=this.Image.width; this.H=this.Image.height; alert(this.W); }   }   var mavoiture=new CVehicule("Mercedes",1,"img/vehicules/taxi01.png",50,450);

---

Ensuite j'ai essayé d'y ajouter une fonction Draw() mais quand je mets "this" devant la fonction vscode me donne une erreur et rien ne marche.
Du coup je mets pas le "this" mais pour pas plus de résultats.

Code:

---

1 2 3

Draw=function(ctx){ ctx.drawImage(this.Image,this.X,this.Y,this.W,this.H); }

---

J'ai aussi essayé comme ça :

Code:

---

1 2 3

Draw=function(ctx,x,y,w,h){ ctx.drawImage(this.Image,x,y,w,h); }

---

Bonjour,

Il semble manquer une accolade pour fermer correctement la classe CVehicule dans ton exemple.
La méthode onload ne semble pas être utile actuellement.
La fonction draw() est définie dans la classe CVehicule ?

Un exemple reproductible (complet et/ou en ligne) est souvent plus parlant.
De ce que j'ai compris de ton code : https://jsfiddle.net/urfamn6h/

Sur la première partie de ton code, il manque en effet une accolade et

Code:

---

document.body.appendChild(this.Image);

---

Citation:

---

Envoyé par Pytet

Bonjour,

Il semble manquer une accolade pour fermer correctement la classe CVehicule dans ton exemple.
La méthode onload ne semble pas être utile actuellement.
La fonction draw() est définie dans la classe CVehicule ?

Un exemple reproductible (complet et/ou en ligne) est souvent plus parlant.
De ce que j'ai compris de ton code : https://jsfiddle.net/urfamn6h/

---

Merci beaucoup, je vais le voir !
Oui la fonction draw est dans la classe CVehicule, j'ai essayé de faire comme j'ai vu sur le net, d'aprés ma compréhension du truc :/

Merci Archimède !
en fait j'ai oublié l'accolade lors de la copie mais dans mon code elle y est.

Citation:

---

Envoyé par Archimède

Sur la première partie de ton code, il manque en effet une accolade et

Code:

---

document.body.appendChild(this.Image);

---

---

ça se place à quel endroit ?
Dans le onload() de l'image ?

Citation:

---

Envoyé par Pytet

Bonjour,

Il semble manquer une accolade pour fermer correctement la classe CVehicule dans ton exemple.
La méthode onload ne semble pas être utile actuellement.
La fonction draw() est définie dans la classe CVehicule ?

Un exemple reproductible (complet et/ou en ligne) est souvent plus parlant.
De ce que j'ai compris de ton code : https://jsfiddle.net/urfamn6h/

---

Sur le lien, la voiture n'apparaît pas aussi :/

Citation:

---

Envoyé par nouby

ça se place à quel endroit ?
Dans le onload() de l'image ?

---

Par rapport à ce que tu as écrit en dessous de this.image.src....
Après c'est la conception de ta classe qui faudra revoir... le chargement de ton image devrait se faire dans le onload

Citation:

---

Envoyé par Archimède

Par rapport à ce que tu as écrit en dessous de this.image.src....
Après c'est la conception de ta classe qui faudra revoir... le chargement de ton image devrait se faire dans le onload

---

Merci, tu entends quoi par le onload() ? est-ce celui qui est dans la classe : this.Image.onload=function(){..}.

En tous cas, j'ai essayé ça, pas d'affichage :

Code:

---

1 2 3 4 5 6

this.Image.SRC=Fichier; this.Image.onload=function(){ this.W=this.Image.width; this.H=this.Image.height; document.body.appendChild(this.Image); }

---

Non, je t'ai dit ici :

Code:

---

1 2 3 4 5

this.Image=new Image(); this.Image.src=Fichier; document.body.appendChild(this.Image);//<- là this.Image.addEventListener('load',function(e){ /* ou this.image.onload=function...*/ const objImg=e.target;//....

---

aaah Merci !

Et sur le lien donné plus haut de jsfiddle, il n'y a aucun onload d'image pourtant ?

EDIT :

Avec l'appendChild, vscode me fait une erreur :

caught TypeError: Cannot read properties of null (reading 'appendChild')

Oui, si tu ne charges pas ton fichier avant, le this.image sera indéfini, je pense. Autant pour moi. donc erreur sur this.image.onload...

je suis désolé, Archimède si je comprend pas, mais tu veux dire quoi, je dois faire quoi d'aprés toi pour voir apparaître mon image ?
j'ai fais comme dans le lien jsfiddle mais moi j'ai rien qui s'affiche.

EDIT : c'est bon j'ai affiché une image en prenant l'exemple de jsfiddle ;)

Merci beaucoup de votre aide, c'est vraiment génial !!!

Citation:

---

Envoyé par nouby

je suis désolé, Archimède si je comprend pas, mais tu veux dire quoi, je dois faire quoi d'aprés toi pour voir apparaître mon image ?
j'ai fais comme dans le lien jsfiddle mais moi j'ai rien qui s'affiche.

---

En laissant ton code intact tu fais :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

class CVehicule{ constructor(Nom, Type, Fichier, X, Y, W, H){ this.Nom=Nom; this.Type=Type; this.Image=new Image(); this.Image.src=Fichier; document.body.appendChild(this.Image); this.Image.onload=function(e){ const objImg=e.target; this.W=this.Image.naturalWidth; this.H=this.Image.naturalHeight; alert(this.W); }; } } var mavoiture=new CVehicule("Mercedes",1,"le path de ton fichier",50,450);

---

Et tu verras ton image, je te l'ai déjà dit...

Ah ok !
je vais essayer comme ça aussi ;)

En fait, non seulement mon code était pas bon, mais en plus j'avais mis
this.Image.SRC= Alors que ce qui marche c'est,
this.Image.src=.
Une histoire de majuscules...

Et finalement j'ai pas eu à faire le load() de l'image, je me suis servi du code donné sur jsfiddle montré plus haut dans ce topic.
Merci encore pour vos éclaircissements qui m'ont beaucoup apporté en compréhension !!!

Oui mais le src ne suffisait pas si tu ne définis pas le nœud sur body de ton image avec appendChild...
Regarde ce tuto sur les éléments du dom...

https://javascript.developpez.com/tu...-lignes-du-dom

Ok, Merci de ton lien ;)