Search code examples
angularngx-image-cropper

ngx-cropper: set initial size and position of cropper area

I have searched and cannot find the solution I am looking for with ngx-cropper. What I would like is for the cropper area to be in top left corner when I open it and about 1/6th the size of the image like this:

enter image description here

I have got this using a static width and height:

<image-cropper
[imageChangedEvent]="imageChangedEvent"
[maintainAspectRatio]="false"
[cropperStaticHeight]= "100"
[cropperStaticWidth]= "125"
[resizeToWidth]="0"
format="png"
(imageCropped)="imageCropped($event)"
(imageLoaded)="imageLoaded()"
(cropperReady)="cropperReady()"
(loadImageFailed)="loadImageFailed()"
 ></image-cropper>

However I would also like to be able to adjust it so it can increase or decrease in size.

I though this would have worked (setting an initial positon) but it didn't :

cropper To be able to overwrite the cropper coordinates, you can use this input. Create a new object of type CropperPosition and assign it to this input. Make sure to create a new object each time you wish to overwrite the cropper's position and wait for the cropperReady event to have fired.

cropperPosition: CropperPosition = {
x1: 0,
y1: 0,
x2: 125,
y2: 100
};

Does anyone know how I can achieve this?

Solution

  • Found a solution here: https://github.com/Mawi137/ngx-image-cropper/issues/115

    imageLoaded() {
    setTimeout(() => {
        this.cropper = {x1.... };
    }, 2);
}

    There is also a note at the end saying it works with "ngx-image-cropper": "0.1.21" but not with latest versions I found if I set it back to 0.1.21 and try it, it worked. After I reset to the latest version and it worked fine too.