不需要默认裁剪器仅按钮单击 - ngx-image-cropper - Angular

如何解决不需要默认裁剪器仅按钮单击 - ngx-image-cropper - Angular

使用默认加载图像时的当前代码，我正在裁剪，但我想要的是当我点击裁剪按钮时，只有裁剪应该发生

我在 google 中检查了一些我得到了 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;        
   }

提前致谢

解决方法

如果您想在图像选择/图像更改时阻止默认图像裁剪，您可以使用 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>

假设您的组件代码具有按钮单击事件的逻辑以触发图像裁剪事件。