Feature: Crop image with static cropper only by moving image

[PatrikHorvatic]

Hello.

It would be usefull if you could crop image by only manipualting image position and having cropper fixed in the center with specific dimensions. It is new way of cropping images and it would improve UX.

It is currently supported to move image and crop it, but it is not possible to have cropper fixed in the center and not move it. "disabled" input disables both image and cropper.

[Mawi137]

Hi

That sounds like the options cropperStaticWidth and cropperStaticHeight?

[PatrikHorvatic]

Hello,

adding cropperStaticWidth and cropperStaticHeight did not disable movement of cropper. Am I doing something wrong?. Here I will write implemented code used with Ionic framework.

Method for opening ModalComponent:

const modal = await this.info.prepareModal({
  component: ImageCroppingModalComponent,
  backdropDismiss: false,
  animated: true,
  mode: 'ios',
  showBackdrop: true,
  id: 'IMAGE-CROPPER-ID',
  componentProps: {
    ...ENVIRONMENT.AVATAR_RECRUITER_IMAGE_CROP_CONFIG,
    imageData: slika,
  }
});
modal.present();

AVATAR_RECRUITER_IMAGE_CROP_CONFIG: {
	widthResize: 300,
	cropperStaticWidth: 300,
	cropperStaticHeight: 300,
	keepAspectRatio: true,
	containWithinAspectRatio: true,
	aspectRatio: 1 / 1,
	disabled: false,
	roundCropper: true,
	allowMoveImage: true,
	pictureQuality: 100
}

ImageCroppingModalComponent
TypeScript

export class ImageCroppingModalComponent implements OnInit {

  @ViewChild('imageCropper') imageCropper: ImageCropperComponent;

  @Input() imageData: string;
  @Input() keepAspectRatio: boolean;
  @Input() disabled: boolean;
  @Input() aspectRatio: number;
  @Input() roundCropper: boolean;
  @Input() allowMoveImage: boolean;
  @Input() widthResize: number;
  @Input() cropperStaticWidth: number;
  @Input() cropperStaticHeight: number;
  @Input() pictureQuality: number;

  public showCropper = false;
  protected cropperImage: Element;
  protected cropperContainerDiv: Element;

  constructor(private modalCtrl: ModalController) { }

  ngOnInit() {
    setTimeout(() => {
      this.showCropper = true;
    }, 600);
  }

  pripremiRadius() {
    if (this.aspectRatio && this.aspectRatio === 1 / 1) {
      const nadjen = document.querySelector('.ngx-ic-cropper');
      // 
      nadjen.classList.add('povecaj-border-radius-croppera');
    }
  }

  cropImage() {
    this.imageCropper.crop();
  }

  cancelCrop() {
    this.imageData = null;
    this.modalCtrl.dismiss();
  }

  pripremiSlikuNakonCropa(ev: ImageCroppedEvent) {
    this.modalCtrl.dismiss({
      croppedImage: ev.base64
    });
  }

}

HTML

<div class="options-container">
  <h5 class="ion-no-margin whiteColor inter fontSize16 lineHeight150" (click)="cancelCrop()">Cancel</h5>
  <h4 class="ion-no-margin whiteColor interMedium fontSize18 lineHeight150">Crop your photo</h4>
  <h5 class="ion-no-margin whiteColor inter fontSize16 lineHeight150" (click)="cropImage()">Apply</h5>
</div>
<app-spinner *ngIf="!showCropper" />
<div class="image-cropper-container" *ngIf="showCropper">
  <image-cropper #imageCropper [maintainAspectRatio]="keepAspectRatio" output="base64" [imageBase64]="imageData"
    [format]="'jpeg'" [resizeToWidth]="widthResize" [cropperStaticWidth]="cropperStaticWidth"
    [cropperStaticHeight]="cropperStaticHeight" [aspectRatio]="aspectRatio" [hideResizeSquares]="true"
    [roundCropper]="roundCropper" [onlyScaleDown]="true" [imageQuality]="pictureQuality" [disabled]="disabled"
    (imageCropped)="pripremiSlikuNakonCropa($event)" [autoCrop]="false" (cropperReady)="pripremiRadius()"
    [allowMoveImage]="allowMoveImage">
  </image-cropper>
</div>

[boban100janovski]

Hello.

It would be usefull if you could crop image by only manipualting image position and having cropper fixed in the center with specific dimensions. It is new way of cropping images and it would improve UX.

It is currently supported to move image and crop it, but it is not possible to have cropper fixed in the center and not move it. "disabled" input disables both image and cropper.

You are correct, there needs to be a separate option to disable just the "cropper".

A hack i used to quickly disable the movement is to remove the element with class "ngx-ic-move".
Also set the options to:

    ....
    [disabled]="false"  // has to be false or panning will be disabled 
    [cropperStaticWidth]="300" // Set these as per your design 
    [cropperStaticHeight]="300" 
    [allowMoveImage]="true" // enable panning
    [hideResizeSquares]="true"
    [cropper]="position"
    ....
    

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[boban100janovski]

Adding this comment to avoid the issue being closed.