ui-cropper

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

`` javascript
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.
});
`
` html

``

Documentation

You can checkout all options under our wiki page

Contributors

This project exists thanks to all the people who contribute.

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

License

See the LICENSE file