ngx-img-cropper

Angular 9 (ivy) compatible!

An image cropping tool for Angular. 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 ngx-img-cropper --save
`

Screenshot

!Screenshot

contributing

`
git clone
npm i
npm start
`

Do your magic

create a branch for your feature and send a PR

Let's do awesome stuff!

Testing

`
npm install
npm run all
`

Example usage

`typescript
import { Component } from 'angular2/core';
import { ImageCropperComponent, CropperSettings } from 'ngx-img-cropper';

@Component({
selector: 'test-app',
template:

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 for the corner markers
- centerTouchRadius:_number_ (default: 20) - Touch devices radius for the drag center marker
- 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
- markerSizeMultiplier:_number_ (default: 1) - A variable that controls the corner markers' size
- showCenterMarker:_boolean_ (default: true) - if true, the drag center marker is visible
- keepAspect:_boolean_ (default: true) - if true, the aspect ratio of width and height of the crop window is retained during resizing
- rounded:_boolean_ (default: false) - if true, the cropper will be a circle.

Customizing Image cropper

Replacing component file input:

`html


`typescript
data:any;

@ViewChild('cropper')
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);
}
`

ToDo:

- write tests

Changelog

$3

$3

- Build with @angular/cli
- @angular ^7.2.0

$3

- IOS Fix

- Angular 5 support

$3

$3

$3

- Angular 5 support

$3

Fix for #36 - Add button to crop
Fix for #186 - Handle Hi-Res images
Fix for #92 - IOS crop issue

$3

- Dist package cleanup (PR by: @leosvelperez)

$3

- Made compatible with Angular 4 && AOT

$3

- CR: #148 - removed ts files from output package.
- fix for #150 - made fileType undefined as default. if defined it will enforce output format

$3

- added dynamicSizing, cropperClass for responsive purposes

$3

- added reset() method on ImageCropperComponent - fix for #118
- added compressRatio as parameter in the cropper settings

$3

- 21 Bugs in the code, I fixed 3, (hopefully not) 30 Bugs in the code

$3

- Fixed #87 get unsacled crop of image

$3

- update for AngularJS 2.0.1
- removed typings
- fixed aspect ratio issue
- made cropper property public
- added onmouseleave behavior

$3

- Fixed issue #49 - Error on reading exif

$3

- Parsed EXIF information for image orientation
- fixed multiple browser compatibility issues
- added accepted files regex
- updated to Angular RC5

$3

- introduced flag to hide the component file input in order to allow customization
- added pinch/zoom feature for touch devices

$3

- introduced rounded cropper: cropperSettings.rounded = true. Making keep aspect = false will throw an error on rounded cropper. (Issue #14)
- cropper takes into consideration source image data pixels not cropper image data. (Issue #17)
- support for minSize now have the following option: minWithRelativeToResolution. When set to false it will keep min size relative to canvas size. (Issue #21)
- allow user to customize look and feel of the cropper:
this.cropperSettings.cropperDrawSettings.strokeColor = 'rgba(255,255,255,1)';
this.cropperSettings.cropperDrawSettings.strokeWidth = 2;

$3

Starting with: 0.4.2 ts files are no loger published (only js & d.ts).
Please change your system.config files to make use of the js files.

`
'ngx-img-cropper' : { main: 'index.js', defaultExtension: 'js' }
`

Build

should work with one of these

`
"release:patch": "npm version patch && npm run release",
"release:minor": "npm version minor && npm run release",
"release:major": "npm version major && npm run release",
``

Steps:

1. npm test (no tests yet)
2. ng build --project ngx-img-cropper
3. cd dist/ngx-img-cropper
4. npm publish