ngCroppie - Angular Croppie Tool

Angular Croppie Tool is an image cropping and rotating module for AngularJS based on Croppie.js
Pure Javascript implementation; Also responsive!

Dependencies

• Angular
• Croppie.js

Installation

# Using bower:
$ bower install ngCroppie

# Using npm:
$ npm install ng-croppie

Basic usage

• Include ngCroppie module into your project;
• No dependencies are required in the controller;
• Add <ng-croppie> tag with the following arguments:
  • src Image or Blob: path to Image File or Base64;
  • ng-model Base64: the image output;

Demo

Example

JS

function ExampleCtrl() {
  var vm = this;

  vm.inputImage = null;
  vm.outputImage = null;

  vm.onUpdate = function(data) {
    //console.log(data);
  };
}

angular
  .module('exampleModule', ['ngCroppie'])
  .controller('ExampleCtrl', [ExampleCtrl]);

HTML

<ng-croppie   src="inputImage"
              ng-model='outputImage'
              update='onUpdate'
              boundry="{w: 400, h: 400}"
              viewport="{w: 300, h: 300}"
              orientation="true"
              rotation="90"
              type="circle">
</ng-croppie>



<!-- Preview -->
<img ng-src="{{outputImage}}" />

Parameters

• Image or Blob data: path to image file or base64;
• Base64 ng-model: the image output, returns are a base64;
• Function update: place a functon in the controller to run whenever changes are made to the image;
• Object boundry { w: __, h: __ }: (optional) the size of the container that will host the croppie tool - defaults to 400x400;
• Object viewport { w: __, h: __ }: (optional) the output size, must be smaller than the boundry or it will equal it - defaults to 300x300;
• Boolean zoom: (optional) enable zoom slider - defaults to true;
• Boolean mousezoom: enable mouse scroll bar to zoom in/out. Works with zoom - defaults to true;
• Boolean zoomslider: enable zoom slider only (scrolling and pinching zoom still possible if set to false), works with zoom - defaults to true;
• Boolean exif: (optional) enable exif orientation compatability - defaults to undefined;
• Boolean orientation: (optional) enable custom orientation support when binding images - defaults to false.
• Integer rotation: rotate the image by a specified degree amount, works with orientation - valid values: 90, 180, 270, -90, -180, -270;
• String type: (optional) can either be 'circle' or 'square' - defaults to 'square';
• Boolean mobile: (optional) enable mobile view - defaults to viewport: 250x250 and boundry: 300x300;

Version

1.0.3

Contributors

• orif-jr
• stasinua
• htao00
• alanheppenstall

Updates

• added mobile support
• updated dependencies
• code refactoring

License

MIT © ngCroppie