Image cropper for Angular

Installation

npm i komou-image-cropper-js --save

In your html file

<input type="file" (change)="loadImage($event)" accept="image/*">

<komou-image-cropper
              [IMAGE_EVENT]="imageEvent"
              [aspectRatio]="1"
              [IMAGE_QUALITY]="50"
              [IMAGE_TYPE]="'image/jpeg'"
              (getCroppedEvent)="getCroppedEvent($event)">
</komou-image-cropper>

<div style="text-align: center">
  <img style="height: 200px;" [src]="croppedImageBase64" alt="">
</div>

In your ts file

import {KomouImageCropperJsComponent} from 'komou-image-cropper-js';

@Component({
  standalone: true,
  imports: [KomouImageCropperJsComponent]
})
export class YourComponent {

   croppedImageFile: File;
   croppedImageBase64: string;
   imageEvent: any;
    
    constructor() {
    }
    
      loadImage(event: any) {
        this.imageEvent = event;
    }
    
    getCroppedEvent(event: {croppedImageBase64: string, croppedImageFile: File}) {
      this.croppedImageBase64 = event.croppedImageBase64;
      this.croppedImageFile = event.croppedImageFile;
  }
}

Api

Outputs