Image cropper for Angular

StackBlitz

Installation

npm install ngx-image-cropper --save

Upgrade instructions

For a list of breaking changes and update instructions, go to releases. Only Angular 16+ is supported since version 8.0.0.

Example usage

Add the element to your HTML:

<input type="file" (change)="fileChangeEvent($event)" />

<image-cropper
    [imageChangedEvent]="imageChangedEvent"
    [maintainAspectRatio]="true"
    [aspectRatio]="4 / 3"
    format="png"
    (imageCropped)="imageCropped($event)"
    (imageLoaded)="imageLoaded($event)"
    (cropperReady)="cropperReady()"
    (loadImageFailed)="loadImageFailed()"
></image-cropper>

<img [src]="croppedImage" />

In your ts file, declare the usage of ImageCropperComponent and add the following methods:

import { ImageCropperComponent, ImageCroppedEvent, LoadedImage } from 'ngx-image-cropper';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  standalone: true,
  imports: [ImageCropperComponent]
})
export class YourComponent {
    imageChangedEvent: Event | null = null;
    croppedImage: SafeUrl  = '';

    constructor(
      private sanitizer: DomSanitizer
    ) {
    }

    fileChangeEvent(event: Event): void {
        this.imageChangedEvent = event;
    }
    imageCropped(event: ImageCroppedEvent) {
      this.croppedImage = this.sanitizer.bypassSecurityTrustUrl(event.objectUrl);
      // event.blob can be used to upload the cropped image
    }
    imageLoaded(image: LoadedImage) {
        // show cropper
    }
    cropperReady() {
        // cropper ready
    }
    loadImageFailed() {
        // show message
    }
}

When you choose a file from the file input, it will trigger fileChangeEvent. That event is then passed to the image cropper through imageChangedEvent which will load the image into the cropper. Everytime you release the mouse, the imageCropped event will be triggered with the cropped image as a Base64 string in its payload.

API

All inputs are optional. Either the imageChangedEvent, imageBase64 or imageFile should be set to load an image into the cropper.

Inputs

CSS Variables

Outputs

Methods

To gain access to the image cropper's methods use @ViewChild(ImageCropperComponent) imageCropper: ImageCropperComponent;

Interfaces

CropperPosition

ImageTransform

ImageCroppedEvent

LoadedImage