Home

Awesome

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

Screenshot

contributing

git clone
npm i
npm start

Do your magic

create a branch for your feature and send a PR <br> Let's do awesome stuff!

Testing

    npm install
    npm run all

Example usage

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

@Component({
  selector: 'test-app',
  template: `
    <div>
      <img-cropper [image]="data" [settings]="cropperSettings"></img-cropper
      ><br />
      <img
        [src]="data.image"
        [width]="cropperSettings.croppedWidth"
        [height]="cropperSettings.croppedHeight"
      />
    </div>
  `,
  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

Customizing Image cropper

Replacing component file input:

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

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:

Changelog

Release ^10.0.8

Release 7.0.0

Release 0.10.2

Release 0.10.1

Release 0.10.0

Release 0.9.2

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

Release 0.8.4

Release 0.8.2

Release 0.8.1

Release 0.8

Release 0.7.6

Release 0.7.1

Release 0.7.0

Release 0.6.1

Release 0.6.0

Release 0.5.0

Release 0.4.5:

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 ..