Angular 9 ngx-图像裁剪器使用滑块调整裁剪器大小

Question

我在我的项目中使用了一个ngx-image-cropper库。我只想裁剪图像的纵横比为16/9，这是可以的。我将aspectRatio设置为16/9，裁剪为矩形。我还实现了mat-slider，它应该只改变图像裁剪器的宽度和高度，就像它使用裁剪器的拖动箭头来缩放一样。有没有可能通过拖动箭头来添加调整裁剪器大小的mat-slider事件，以精确地改变裁剪器比例？我不想缩放图像与垫滑块，但只有裁剪。我已经在ngx-image-cropper库中搜索过了，但我没有找到任何适合我需要的东西。谢谢你的帮助！

链接库：https://www.npmjs.com/package/ngx-image-cropper

    <div class="image-cropper-dimensions">
      <image-crop
        [imageFile]="data.file"
        [cropWidth]="sliderValue"
        [aspectRatio]="16 / 9"
        [isFileStrip]="true"
        [roundCropper]="data.isRoundedCropper"
        (onImageCropped)="onImageCropped($event)"
      >
      </image-crop>
    </div>
  </div>
  <div class="image-edit-container">
    <mat-slider
      [min]="SLIDER_MIN_VALUE"
      [color]="'primary'"
      [value]="sliderValue"
      [step]="SLIDER_STEP"
      (input)="onSliderChange($event)"
    >
    </mat-slider>

Answer 1

在我的应用程序中，我只使用以下命令更改高度: maintainAspectRatio="false“

这是我的代码中的一小部分：

​

<image-cropper
  [imageChangedEvent]="imageChangedEvent"
  [imageURL]="imageUrl"
  [transform]="transform"
  [maintainAspectRatio]="false"
  [aspectRatio]="aspectRatio"
  [canvasRotation]="canvasRotation"
  (imageCropped)="imageCropped($event)"
></image-cropper>

​