Modifier la taille du canvas

Bonjour

Hello,

Je voudrais savoir comment modifier la taille de mon canvas pour qu'il s'adapte à l'image que je luis fait entrer.

html

Code:

---

1 2 3

<input type="file" (change)="test($event)" accept="image/*"> <br><br> <canvas #mycanvas width="0" height="0" style="border: 2px solid red;"> </canvas>

---

ts

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

test(event){   let canvas = this.mycanvas.nativeElement let context = canvas.getContext('2d'); context.clearRect(0, 0, 300, 300);   var render = new FileReader();   render.onload = function(event: any) {   var img = new Image()   img.onload = function() {   canvas.width = img.width; canvas.heigth = img.height; context.drawImage(img, 0, 0);   };   img.src = event.target.result;   };   render.readAsDataURL(event.target.files[0]) }

---

Bonjour,
il ne faut pas confondre l'élément HTML <canvas> et son contexte de rendu.

Lorsque tu affectes les attributs HTML height et width à ton élément <canvas>, tu définies la largeur du contexte de rendu et non celle de l'élément HTML, même si en absence de CSS celui-ci se redimensionne correctement.

Le plus simple semble, dans ton cas, être de redimensionner les deux

Code:

---

1 2 3 4 5 6

// modif de l'attribut HTML canvas.width = img.width; canvas.height = img.height; // modif. CSS de l'élément <canvas> canvas.style.width = img.width +"px"; canvas.style.height = img.height +"px";

---

[EDIT] height et non heigth

Bonjour,

j'ai rajouté le code mais le canvas ne se modifie que sur la largeur et non pas sur la hauteur.

Pièce jointe 424116

:oops: j'ai corrigé, il fallait lire height !

Je fais aussi la même erreur ^^ .
Merci de votre aide.