问题描述
使用默认加载图像时的当前代码,我正在裁剪,但我想要的是当我点击裁剪按钮时,只有裁剪应该发生
我在 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>
假设您的组件代码具有按钮单击事件的逻辑以触发图像裁剪事件。