javascript - 在 Angular 中使用滑块和画布调整图片大小

Question

在我的 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)    
  }

我value从滑块中得到：

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

我尝试做的是始终具有相同的img值，因此每当我调整它的大小时，我都会从相同的位置进行操作img，并且可以来回调整它的大小。为了检查我是否总是使用相同的图像，我 console.log 它，但每次我更改value，我img的都是不同的。为什么我只设置了一次它的值？

标签： javascriptangularhtml5-canvas