ngx-img-cropper

I inherited this project from cstefanache angular2-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 ngx-img-cropper --save

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

1import { Component } from "angular2/core";
2import { ImageCropperComponent, CropperSettings } from "ngx-img-cropper";
3
4@Component({
5  selector: "test-app",
6  template: `<div>
7        <img-cropper [image]="data" [settings]="cropperSettings"></img-cropper><br>
8        <img [src]="data.image" [width]="cropperSettings.croppedWidth" [height]="cropperSettings.croppedHeight">
9    </div>`,
10  declarations: [ImageCropperComponent]
11})
12export class AppComponent {
13  data: any;
14  cropperSettings: CropperSettings;
15
16  constructor() {
17    this.cropperSettings = new CropperSettings();
18    this.cropperSettings.width = 100;
19    this.cropperSettings.height = 100;
20    this.cropperSettings.croppedWidth = 100;
21    this.cropperSettings.croppedHeight = 100;
22    this.cropperSettings.canvasWidth = 400;
23    this.cropperSettings.canvasHeight = 300;
24
25    this.data = {};
26  }
27}

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:

1<div class="file-upload">
2    <span class="text">upload</span>
3    <input id="custom-input" type="file" (change)="fileChangeListener($event)">
4</div>
5<img-cropper #cropper [image]="data" [settings]="cropperSettings"></img-cropper>
6<br>
7<span class="result rounded" *ngIf="data.image" >
8    <img [src]="data.image" [width]="cropperSettings.croppedWidth" [height]="cropperSettings.croppedHeight">
9</span>

1data:any;
2
3@ViewChild('cropper', undefined)
4cropper:ImageCropperComponent;
5
6constructor() {
7    this.cropperSettings = new CropperSettings();
8    this.cropperSettings.noFileInput = true;
9    this.data = {};
10}
11
12fileChangeListener($event) {
13    var image:any = new Image();
14    var file:File = $event.target.files[0];
15    var myReader:FileReader = new FileReader();
16    var that = this;
17    myReader.onloadend = function (loadEvent:any) {
18        image.src = loadEvent.target.result;
19        that.cropper.setImage(image);
20
21    };
22
23    myReader.readAsDataURL(file);
24}

ToDo:

• write tests

Changelog

Release 0.10.2

• IOS Fix

• Angular 5 support

Release 0.10.1

Release 0.10.0

Release 0.9.2

• Angular 5 support

Release 0.8.9

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

Release 0.8.6

• Dist package cleanup (PR by: @leosvelperez)

Release 0.8.4

• Made compatible with Angular 4 && AOT

Release 0.8.2

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

Release 0.8.1

• added dynamicSizing, cropperClass for responsive purposes

Release 0.8

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

Release 0.7.6

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

Release 0.7.1

• Fixed #87 get unsacled crop of image

Release 0.7.0

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

Release 0.6.1

• Fixed issue #49 - Error on reading exif

Release 0.6.0

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

Release 0.5.0

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

Release 0.4.5:

• 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;

Release 0.4.2:

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. npm run build
3. git commit -am "Prerelease updates"
4. git checkout -b release
5. git add -f ./
6. git push --tags
7. git checkout master
8. git branch -D release
9. git push
10. npm run copy:release
11. cd dist
12. npm publish
13. cd ..