Discussion :

[pitchu]

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 :

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

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 :

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
 
 
  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])
  }

[NoSmoking]

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 :

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

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

[pitchu]

Bonjour,

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

[NoSmoking]

j'ai corrigé, il fallait lire height !

[pitchu]

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