ngCroppie | An Angular module for the awesome Croppie.js!

ng-croppie module

ngCroppie

Stars : 10

Forks : 10

Created by Allen Royston

bower install ngCroppie

Demo Download GitHub

ngCroppie - Angular Croppie Tool

Build Status Bower version NPM version Dependency Status NPM Montly Downloads MIT License

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

Dependencies

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

Contributors

  • orif-jr
  • stasinua
  • htao00
  • alanheppenstall

Updates

  • updated dependencies
  • fix wheel in firefox

License

MIT © ngCroppie

Javscript

Javascript plugin

Angular-js