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

Question

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:

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?

Is there a remark on how to bind the newly created cropperPosition to the template? Also, would it be possible to set 'cropperStaticHeight' and 'cropperStaticWidth' via variables? If yes, then you can calculate it to be 1/6 of the size — gerstams, Aug 02 '21 at 15:19
@gerstams What I included about cropperPosition is all that was in the documentation. I can set the 'cropperStaticHeight' and 'cropperStaticWidth with no issues except that you cannot increase cropper area. I need to be able to have a small starting position but also the ability to increase the cropper area if necessary ( I am using in as a zoom function as it works best for what I need in Angular. The zoom information available does not meet the requirements) — Siobhan Holubicka, Aug 03 '21 at 05:32
Can you use minWidth and minHeight instead of static? I just now understood why its called static, sorry. I found the min values here: https://www.npmjs.com/package/ngx-image-cropper — gerstams, Aug 03 '21 at 06:44

score 0 · Accepted Answer · answered Aug 03 '21 at 06:09

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.

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

1 Answers1