Angular 9 ngx-image-cropper 使用 slider 調整裁剪器大小

Question

我在我的項目中使用了一個ngx-image-cropper庫。 我只想以 16/9 的縱橫比裁剪圖像，這沒關系。 我將aspectRatio設置為 16/9，cropper 是矩形的。 我還實現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>