CroppieJS Wrapper

component-controller.ts

import {
  Component,
  ElementRef,
  EventEmitter,
  Input,
  OnInit,
  Output,
  ViewChild
} from '@angular/core';
import * as Croppie from 'croppie';
import { CropData, CroppieOptions, ResultOptions } from 'croppie';

@Component({
  selector: 'ngc-fudos-croppiejs',
  templateUrl: './fudos-croppiejs.component.html',
  styles: []
})
export class FudosCroppiejsComponent implements OnInit {
  @ViewChild('fudosCroppieId')
  fudosCroppieId: ElementRef;

  @Input()
  croppieOptions: CroppieOptions;

  @Input()
  bind: (img: string) => void;

  @Input()
  imageUrl: string = null;

  @Input()
  resultOptions: ResultOptions = { type: 'blob', size: 'original' };

  @Output()
  results: EventEmitter<any> = new EventEmitter<any>();

  @Input()
  public disabled = false;

  private croppie: Croppie;

  constructor() {}

  ngOnInit() {
    if (this.imageUrl) {
      this.setCroppieImage();
    }
  }

  setCroppieImage() {
    if (!this.croppie) {
      this.croppie = new Croppie['Croppie'](
        this.fudosCroppieId.nativeElement,
        this.croppieOptions
      );
    }

    this.croppie.bind({
      url: this.imageUrl
    });

    this.bind = (img: string) => {
      this.croppie.bind({ url: this.imageUrl });
    };
  }

  newResults() {
    this.croppie.result(this.resultOptions).then(res => {
      this.results.emit(res);
    });
  }

  get(): CropData {
    return this.croppie.get();
  }

  AfterImageSelect(evt: any) {
    if (!evt.target) {
      return;
    }
    if (!evt.target.files) {
      return;
    }
    if (evt.target.files.length !== 1) {
      return;
    }
    const file = evt.target.files[0];
    if (
      file.type !== 'image/jpeg' &&
      file.type !== 'image/png' &&
      file.type !== 'image/gif' &&
      file.type !== 'image/jpg'
    ) {
      return;
    }
    const fr = new FileReader();
    fr.onloadend = loadEvent => {
      this.imageUrl = fr.result.toString();

      if (this.imageUrl) {
        this.setCroppieImage();
      }
    };
    fr.readAsDataURL(file);
  }
}

component-template.html

<div fxLayout="row wrap" fxFlex="100">
  <div fxFlex="100" fxLayout="row">
    <div fxFlex="100" #fudosCroppieId (update)="newResults()"></div>
  </div>
  <div fxFlex="100" fxLayout="row" fxLayoutGap="5px" class="p-1" fxLayoutAlign="center center">
    <input #imageUpload hidden type="file" id="fileupload" #imageUpload (change)="AfterImageSelect($event)" accept="image/gif, image/jpeg, image/png" />
    <button [disabled]="disabled" fxFlex="100" class="text-white font-weight-bold mat-elevation-z0" type="button"
      mat-raised-button color="accent" (click)="imageUpload.click()">
      <mat-icon>add_a_photo</mat-icon>
      Select Image
    </button>
  </div>
</div>