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