This angular library is a wrapper of Javascript image cropper
npm install ngx-cropperjs-wrapperThis angular library is a wrapper of Javascript image cropper
1. Install package
``
npm install ngx-cropperjs-wrapper
2. Import module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgxCropperJsModule } from 'ngx-cropperjs-wrapper';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Import this library
NgxCropperJsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`Usage example
Angular cropperjs demo
Component
import { Component } from '@angular/core';
import { CropperOptions } from 'ngx-cropperjs-wrapper';@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
public fileInput: File = null;
// Config for cropper.js (see official cropper.js repo for complete list of available options)
public options = {
minCropWidth: 750, // Implemented in wrapper (not supported in cropper.js)
minCropHeight: 750, // Implemented in wrapper (not supported in cropper.js)
movable: false,
scalable: false,
zoomable: false,
viewMode: 3,
aspectRatio: 1,
} as CropperOptions;
onFilePick(event: any) {
// Feed selected file to cropper
this.fileInput = event.target.files.item(0);
}
onFail(error) {
console.error(error);
}
onFileChange(file: File) {
// TODO: upload file to backend
}
}
$3
Angular cropperjs demo
{{ data | json }}
$3
* This wrapper supports all events cropper.js emits
* You can bind to these events the Angular way
* Example of some cropper.js events:
This wrapper also has few events on its own
* (init) emits instance of cropper.js after it's initialized
* (fileChange) emits cropped image as
* (fail) emits error when library fails to initialize for example if you pass invalid input
$3
If you need more functionality than this wrapper provides you can still access cropper.js directly.
Init handler
onCropperInit(cropper: Cropper) {
// cropper is cropper.js instance
}
This project is licensed under the MIT License - see the LICENSE.md file for details
* Hat tip to cropper.js creator Chen Fengyuan