默認裁剪器不需要僅按鈕單擊 - ngx-image-cropper - Angular

Question

使用默認加載圖像時的當前代碼，我正在裁剪，但我想要的是當我點擊裁剪按鈕時，只有裁剪應該發生

我在谷歌檢查了幾個我得到了autoCrop:false但我不確定我需要放在哪里

這是 HTML 代碼

<image-cropper 
          [imageChangedEvent]="imageChangedEvent"
          [maintainAspectRatio]="true"
          [aspectRatio]="4 / 3"
          
          [resizeToWidth]="128"
          format="png"
          (imageCropped)="imageCropped($event)"
          (imageLoaded)="imageLoaded()"
          (cropperReady)="cropperReady()"
          (loadImageFailed)="loadImageFailed()" style="max-height:500px">

這是TS代碼

  //cropping process done here 
   cropImage(imgId) {
    this.currentProcessingImg = imgId;
    var imgObj = this.ulpoadedFiles.find(x => x.imgId === imgId);
   //created dummy event Object and set as imageChangedEvent so it will set cropper on this image 
    var event = {
      target: {
       files: [imgObj.imgFile]
     }
    };
    this.imageChangedEvent = event;        
   }

提前致謝

Answer 1

如果您想防止圖像選擇/圖像更改時的默認圖像裁剪，您可以使用您在 google 上找到的 autoCrop 屬性[autoCrop]="false" ，如下所示：

<image-cropper
                    [autoCrop]="false"
                        [roundCropper]="true"
                        [imageChangedEvent]="imageChangedEvent"
                        [maintainAspectRatio]="true"
                        [aspectRatio]="4 / 4"
                        format="png"
                        (imageCropped)="imageCropped($event)"
                        (imageLoaded)="imageLoaded()"
                        (cropperReady)="cropperReady()"
                        (loadImageFailed)="loadImageFailed()"
                    ></image-cropper>

假設您的組件代碼具有按鈕單擊事件的邏輯以觸發圖像裁剪事件。