Currently, the image is cropped by default when loaded, but I would like the crop to only occur when the crop button is clicked.
I tried searching on Google and found autoCrop:false, but I am unsure where to place it in the code.
Below is the HTML code:
<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">
And here is the TS code:
// Code for cropping process goes here
cropImage(imgId) {
this.currentProcessingImg = imgId;
var imgObj = this.ulpoadedFiles.find(x => x.imgId === imgId);
// Create dummy event Object and set it as imageChangedEvent so the cropper will be set on this image
var event = {
target: {
files: [imgObj.imgFile]
}
};
this.imageChangedEvent = event;
}
Thank you in advance!