Need help with ui-cropper?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

163 Stars 83 Forks MIT License 432 Commits 46 Opened issues


Image Crop directive for AngularJS

Services available


Need anything else?

Contributors list


Build Status GitHub release Join the chat at Backers on Open Collective Sponsors on Open Collective

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


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


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


Download directly

Download ui-cropper files from GitHub


bower install ui-cropper


npm install ui-cropper


meteor npm install --save ui-cropper

How to Use

angular.module('app', ['uiCropper'])
    $scope.myImage = '';
    $scope.myCroppedImage = ''; // in this variable you will have dataUrl of cropped area.


You can checkout all options under our wiki page


This project exists thanks to all the people who contribute.


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


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


See the LICENSE file

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.