@deer-inc/ngx-croppie

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

option	type	default
aspectRatio	number	4/2
oldImageUrl	string	null
width	number	420
resultType	string	base64