Angular Croppie Tool is an image cropping and rotating module for AngularJS based on Croppie.js
Pure Javascript implementation; Also responsive!
# Using bower:
$ bower install ngCroppie
# Using npm:
$ npm install ng-croppie
ngCroppie
module into your project;<ng-croppie>
tag with the following arguments:
src
Image or Blob: path to Image File or Base64;ng-model
Base64: the image output;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="https://github.com/allenJynRoyston/ngCroppie/raw/master/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="https://github.com/allenJynRoyston/ngCroppie/raw/master/{{outputImage}}" />
data
: path to image file or base64;ng-model
: the image output, returns are a base64;update
: place a functon in the controller to run whenever changes are made to the image;boundry { w: __, h: __ }
: (optional) the size of the container that will host the croppie tool - defaults to 400x400;viewport { w: __, h: __ }
: (optional) the output size, must be smaller than the boundry or it will equal it - defaults to 300x300;zoom
: (optional) enable zoom slider - defaults to true;mousezoom
: enable mouse scroll bar to zoom in/out. Works with zoom
- defaults to true;zoomslider
: enable zoom slider only (scrolling and pinching zoom still possible if set to false), works with zoom
- defaults to true;exif
: (optional) enable exif orientation compatability - defaults to undefined;orientation
: (optional) enable custom orientation support when binding images - defaults to false.rotation
: rotate the image by a specified degree amount, works with orientation
- valid values: 90, 180, 270, -90, -180, -270;type
: (optional) can either be 'circle' or 'square' - defaults to 'square';mobile
: (optional) enable mobile view - defaults to viewport: 250x250 and boundry: 300x300;1.2.2
MIT © ngCroppie