ngx-cropper: Make cropper size and position fix and move the image

Question

I have searched and cannot find the solution I am looking for with ngx-image-cropper. I would like is to fix the position of the cropper to be center of the image and immovable once the image is loaded. Instead of moving the cropper, I would like to move the image within the cropper window. Here is the stackblitz example:

https://stackblitz.com/edit/angular-ivy-c99rna?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

I'm able to set the fix width and height of the cropper, set the image to be movable with setting the ngx-image-cropper inputs. However my ngx crop function doesn't captured the moved image. Also setting the position to be center for the cropper tool doesnt work.

Answer 1

Had the same issue, i fixed it adding [(transform)]="transform" in <image-crooper></image-cropper> and added this in TS file,

transform: ImageTransform = {
    translateUnit: 'px'
};

And if you want to move only image, and not cropper, you should add this in your css file. Hope it helps

image-cropper::ng-deep {
  .ngx-ic-overlay,
  .ngx-ic-cropper {
    pointer-events: none;
  }
}