javascript - Resize picture with a slider and canvas in Angular

Question

In my Angular app I want to resize a picture with a slider.

  img:  HTMLImageElement
  
  pixelate(selectedActor, value){    
    if (value === 1) {
      this.img = document.getElementById(selectedActor.toString()) as HTMLImageElement;
      console.log(this.img)
    }
    console.log(this.img)
    var canvas = <HTMLCanvasElement>document.getElementById("canvas");
    var ctx = canvas.getContext("2d");    
    canvas.width = this.img.width / value;
    canvas.height = this.img.height / value;
    ctx.drawImage(this.img, 0, 0, canvas.width, canvas.height);
    var target = new Image();
    target.src = canvas.toDataURL()
    return (target.src)    
  }

I get value from a slider:

    <mat-slider
      class="my-auto"
      [disabled]="disabled"
      [invert]="invert"
      max= 5
      min= 1
      step= 1
      thumbLabel= true
      tickInterval= 1
      value= "1"
      [(ngModel)]="value"
      [vertical]=false
      (input)="pixelize($event)">Pixelate
    </mat-slider>

What I try to do is to always have the same img value so whenever I resize it, I do do it from the same img and I can resize it back and forth. To check if I was always using the same image I console.log it, but each time I change the value, my img is diferent. How come since I set its value only once?

Answer 1

等待大神答复