hecmec / ui-cropper

Image Crop directive for AngularJS

uiCropper

Simple Image Crop directive for AngularJS. Enables to crop a circle, square or rectangle from of an image.

Live demo

Test it yourself, upload or choose an image from url in our amazing Online test suite

or pick a Codepen to play around with it
Codepen: Circle + Chargement Crop
Codepen: Square + Init Url Crop + Maximum rendered image
Codepen: Rectangle Crop
Codepen: Rectangle Crop + Crop info
Codepen: Rectangle With Aspect Crop and Max Init
Codepen: Rectangle + Aspect + Array Crop
Codepen: Rectangle + CSS Crop
Codepen: Different sizes

News

We just moved this lib to new name, before you add it to your please do tests.

Contribution

If you want to contribute, please join our gitter chat.

Installing

Download directly

Download ui-cropper files from GitHub

Bower

bower install ui-cropper

NPM

npm install ui-cropper

Meteor

meteor npm install --save ui-cropper

How to Use

angular.module('app', ['uiCropper'])
.controller(function($scope){
	$scope.myImage = 'https://raw.githubusercontent.com/CrackerakiUA/ui-cropper/master/screenshots/live.jpg';
	$scope.myCroppedImage = ''; // in this variable you will have dataUrl of cropped area.
});

<ui-cropper image="myImage" result-image="myCroppedImage"></ui-cropper>

Documentation

You can checkout all options under our wiki page

License

See the LICENSE file