0.0.17 • Published 5 years ago

@deer-inc/ngx-croppie v0.0.17

Weekly downloads
36
License
-
Repository
github
Last release
5 years ago

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

optiontypedefault
aspectRationumber4/2
oldImageUrlstringnull
widthnumber420
resultTypestringbase64
0.0.17

5 years ago

0.0.14

5 years ago

0.0.15

5 years ago

0.0.16

5 years ago

0.0.13

5 years ago

0.0.12

5 years ago