@deer-inc/ngx-croppie v0.0.17

Angular Croppie Wrapper

This is an Angular wrapper library for the Croppie. To use this library you should get familiar with the Swiper documentation as well since this documentation only explains details specific to this wrapper.

This library was generated with Angular CLI version 9.0.7.

Installation

npm i @deer-inc/ngx-croppie croppie

angular.json

styles: [
  "node_modules/croppie/croppie.css",
]

style.css

/* add */
.cr-viewport {
  box-sizing: border-box;
}

index.html(If not yet)

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>

module.ts

import { CropperModule } from '@deer-inc/ngx-croppie';

...

imports: [
  // ...
  CropperModule,
]

component.html

<deer-crop-trigger [options]="options" (image)="onCroppedImage($event)"></deer-crop-trigger>

import { CropperOptions } from 'cropper';

export class AppComponent {
  options: CropperOptions = {
    aspectRatio: 4 / 3, // width / height
    oldImageUrl: 'http://fakeimg.pl/400x400?font=lobster',
    width: 420,
    resultType: 'base64', // base64 | blob
  }

  onCroppedImage(image: string) {
    // image
  }
}

Options