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

【问题标题】：default cropper not required only button click - ngx-image-cropper - Angular默认裁剪器不需要仅按钮单击 - ngx-image-cropper - Angular
【发布时间】：2021-05-04 07:13:17
【问题描述】：

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

我在谷歌中检查了几个我得到了 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;        
   }

提前致谢

【问题讨论】：

标签： angular typescript angular8 ngx-image-cropper

【解决方案1】：

如果您想在图像选择/图像更改时防止默认图像裁剪，您可以使用 autoCrop 属性 [autoCrop]="false" 您在 google 上找到的如下：

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

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

【讨论】：