@deer-inc/ngx-croppie
v0.0.17
Published
This is an Angular wrapper library for the [Croppie](https://github.com/foliotek/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.
Downloads
14
Readme
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 |