Angular2 Image Cropper Component
npm install ng2-img-cropper - added reset() method on ImageCropperComponent - fix for #118
- added compressRatio as parameter in the cropper settings
- 21 Bugs in the code, I fixed 3, (hopefully not) 30 Bugs in the code
- Parsed EXIF information for image orientation
- fixed multiple browser compatibility issues
- added accepted files regex
- updated to Angular RC5
- introduced flag to hide the component file input in order to allow customization
- added pinch/zoom feature for touch devices
'ng2-img-cropper' : { main: 'index.js', defaultExtension: 'js' }
`ng2-img-cropper
This is an adapatation of Angular 1 image cropper from: https://github.com/AllanBishop/angular-img-cropper
An image cropping tool for AngularJS. Features a rectangular crop area. The crop area's aspect ratio can be enforced during dragging.
The crop image can either be 1:1 or scaled to fit an area.
Install from NPM
`
npm i ng2-img-cropper --save
`Screenshot
Testing
`
npm install
npm run all
`Example usage
`typescript
import {Component} from 'angular2/core';
import {ImageCropperComponent, CropperSettings} from 'ng2-img-cropper';
@Component({
selector: 'test-app',
template:
,
declarations: [ImageCropperComponent]
})
export class AppComponent {
data: any;
cropperSettings: CropperSettings; constructor() {
this.cropperSettings = new CropperSettings();
this.cropperSettings.width = 100;
this.cropperSettings.height = 100;
this.cropperSettings.croppedWidth =100;
this.cropperSettings.croppedHeight = 100;
this.cropperSettings.canvasWidth = 400;
this.cropperSettings.canvasHeight = 300;
this.data = {};
}
}
`Checkout this sample plunker
Settings
canvasWidth:number* - Canvas DOM Element width
canvasHeight:number* - Canvas DOM Element height
width:number* - Crop Width
height:number* - Crop Height
minWidth:number* - Minimum crop Width
minHeight:number* - Minimum crop height
croppedWidth:number* - Resulting image width
croppedHeight:number* - Resulting image height
touchRadius:number* - (default: 20) Touch devices radius
minWithRelativeToResolution:boolean* - (default: true) By default the resulting image will be cropped from original image. If false, it will be cropped from canvas pixels
noFileInput:boolean* - (default: false) - hides the file input element from cropper canvas.
cropperDrawSettings:CropperDrawSettings* - rendering options
strokeWidth:number* - box/ellipsis stroke width
strokeColor:string* - box/ellipsis stroke color
allowedFilesRegex:RegExp* - (default: /\.(jpe?g|png|gif)$/i) - Regex for allowed images
preserveSize:boolean* - will not scale the resulting image to the croppedWidth/croppedHeight and will output the exact crop size from original
fileType:string* - if defined all images will be converted to desired format. sample: cropperSample.fileType = 'image/jpeg'
compressRatio:number* (default: 1.0) - default compress ratio
* dynamicSizing: (default: false) - if true then the cropper becomes responsive - might introduce performance issues on resize;
* cropperClass: string - set class on canvas element;
* croppingClass: string - appends class to cropper when image is set (#142);
* resampleFn: Function(canvas) - function used to resample the cropped image (#136); - see example #3 from runtime sample app
cropOnResize:boolean* (default: true) - if true the cropper will create a new cropped Image object immediately when the crop area is resized
Customizing Image cropper
Replacing component file input:
`html
upload
![]()
``typescriptdata:any;
@ViewChild('cropper', undefined)
cropper:ImageCropperComponent;
constructor() {
this.cropperSettings = new CropperSettings();
this.cropperSettings.noFileInput = true;
this.data = {};
}
fileChangeListener($event) {
var image:any = new Image();
var file:File = $event.target.files[0];
var myReader:FileReader = new FileReader();
var that = this;
myReader.onloadend = function (loadEvent:any) {
image.src = loadEvent.target.result;
that.cropper.setImage(image);
};
myReader.readAsDataURL(file);
}
``