Awesome
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<br><br> or pick a Codepen to play around with it<br> Codepen: Circle + Chargement Crop<br> Codepen: Square + Init Url Crop + Maximum rendered image<br> Codepen: Rectangle Crop<br> Codepen: Rectangle Crop + Crop info<br> Codepen: Rectangle With Aspect Crop and Max Init<br> Codepen: Rectangle + Aspect + Array Crop<br> Codepen: Rectangle + CSS Crop<br> Codepen: Different sizes<br>
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
Contributors
This project exists thanks to all the people who contribute. <a href="https://github.com/CrackerakiUA/ui-cropper/graphs/contributors"><img src="https://opencollective.com/ui-cropper/contributors.svg?width=890&button=false" /></a>
Backers
Thank you to all our backers! 🙏 [Become a backer]
<a href="https://opencollective.com/ui-cropper#backers" target="_blank"><img src="https://opencollective.com/ui-cropper/backers.svg?width=890"></a>
Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
<a href="https://opencollective.com/ui-cropper/sponsor/0/website" target="_blank"><img src="https://opencollective.com/ui-cropper/sponsor/0/avatar.svg"></a> <a href="https://opencollective.com/ui-cropper/sponsor/1/website" target="_blank"><img src="https://opencollective.com/ui-cropper/sponsor/1/avatar.svg"></a> <a href="https://opencollective.com/ui-cropper/sponsor/2/website" target="_blank"><img src="https://opencollective.com/ui-cropper/sponsor/2/avatar.svg"></a> <a href="https://opencollective.com/ui-cropper/sponsor/3/website" target="_blank"><img src="https://opencollective.com/ui-cropper/sponsor/3/avatar.svg"></a> <a href="https://opencollective.com/ui-cropper/sponsor/4/website" target="_blank"><img src="https://opencollective.com/ui-cropper/sponsor/4/avatar.svg"></a> <a href="https://opencollective.com/ui-cropper/sponsor/5/website" target="_blank"><img src="https://opencollective.com/ui-cropper/sponsor/5/avatar.svg"></a> <a href="https://opencollective.com/ui-cropper/sponsor/6/website" target="_blank"><img src="https://opencollective.com/ui-cropper/sponsor/6/avatar.svg"></a> <a href="https://opencollective.com/ui-cropper/sponsor/7/website" target="_blank"><img src="https://opencollective.com/ui-cropper/sponsor/7/avatar.svg"></a> <a href="https://opencollective.com/ui-cropper/sponsor/8/website" target="_blank"><img src="https://opencollective.com/ui-cropper/sponsor/8/avatar.svg"></a> <a href="https://opencollective.com/ui-cropper/sponsor/9/website" target="_blank"><img src="https://opencollective.com/ui-cropper/sponsor/9/avatar.svg"></a>
License
See the LICENSE file