Javascript 使用滑块和画布以角度调整图片大小

在我的Angular应用程序中，我想使用滑块调整图片大小

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

我试图做的是始终保持相同的

img

值，因此每当我调整它的大小时，我都会从相同的

img

进行调整，并且可以来回调整它的大小。 要检查我是否始终使用相同的图像，请将其记录下来，但每次更改

值时，我的
img
都不同。为什么我只设定了一次它的值

    <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>