@devenvy/ngx-cropperjs

Angular Cropper.js Wrapper

This is meant to be a very simple wrapper for Cropper.js

Building the library

ng build lib

Running the demo app

ng build lib --watch   # (watch is optional, to auto rebuild while developing)
ng serve demo

Installing and usage

npm install cropperjs --save
npm install @devenvy/ngx-cropperjs --save

Add styles to angular.json

"yourApp": {
  "architect": {
    "build": {
      "options": {
        "styles": [
          "node_modules/cropperjs/dist/cropperjs.css"
        ]
      }
    }
  }
}

Load the module for your app:

import { CropperModule } from '@devenvy/ngx-cropperjs';

@NgModule({
  ...
  imports: [
    ...
    CropperModule
  ]
})

Use it in your HTML template:

<ngx-cropper
  source="https://fengyuanchen.github.io/cropperjs/images/picture.jpg"
  [options]="options">
</ngx-cropper>

Properties

property	value
source	the image source, can be a url or base64 data url
options	See Cropper.js Options