Angular 7: How to Use croppie or any other cropper

Question

I have created a gallery page where I'm taking images. Now I'm trying to add cropping option for an image, I wanted to use croppie but don't understand how to use it in angular 7?

Any other cropping option or suggestion would be appreciated.

Answer 1

You can use croppie js.

HTML ==> <div id="croppie" #croppie></div> 

TS code:

// import croppie 
import * as Croppie from 'croppie';

// Take Element Ref
@ViewChild('croppie') croppie: ElementRef; 
// or you can use using document.getElementById('croppie')
croppieObj; // global obj

onFileChange() {
   if (this.croppie && this.croppie.nativeElement.className === 'croppie-container') {
       this.croppieObj.destroy();
   }

   this.croppieObj = new Croppie(document.getElementById('croppie'), {
   viewport: {
     width: 200,
     height: 200
   },
   boundary: {
     width: auto,
     height: 300
   },
   enableResize: true,
   enableExif: true,
   });

   f.onload = (e1: any) => {
   this.croppieObj.bind(
    {
      url: e1.target.result,
    }
  );
 };

 f.readAsDataURL(event.target.files[0]);
} 

Answer 2

You can use ngx-image-cropper

relevant TS:

import { Component, ViewChild } from '@angular/core';
import { ImageCroppedEvent, ImageCropperComponent } from 'ngx-image-cropper';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  @ViewChild(ImageCropperComponent) imageCropper: ImageCropperComponent;

  constructor() { }
  imageChangedEvent: any = '';
  croppedImage: any = '';

  fileChangeEvent(event: any): void {
    this.imageChangedEvent = event;
  }
  imageCropped(event: ImageCroppedEvent) {
    this.croppedImage = event.base64;
  }
  cropIt(evnt) {
    console.log(this.croppedImage);
  }

}

relevant HTML:

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

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

<img [src]="croppedImage" />

<button type="button" (click)="cropIt()">save cropped image in Base64 </button>

working stackblitz here