KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #ai-agent #developer-tools #codex #typescript #cli #deepseek-harness #claude-code #ai-agents #mcp #rust

ui-cropper

★ 160 Open GitHub ↗

Image Crop directive for AngularJS

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## uiCropper

[![Build Status](https://travis-ci.org/CrackerakiUA/ui-cropper.svg?branch=master)](https://travis-ci.org/CrackerakiUA/ui-cropper)
[![GitHub release](https://img.shields.io/github/release/CrackerakiUA/ui-cropper.svg)](https://github.com/CrackerakiUA/ui-cropper) [![Join the chat at https://gitter.im/CrackerakiUA/ui-cropper](https://badges.gitter.im/CrackerakiUA/ui-cropper.svg)](https://gitter.im/CrackerakiUA/ui-cropper?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[![Backers on Open Collective](https://opencollective.com/ui-cropper/backers/badge.svg)](https://raw.githubusercontent.com/CrackerakiUA/ui-cropper/master/) [![Sponsors on Open Collective](https://opencollective.com/ui-cropper/sponsors/badge.svg)](https://raw.githubusercontent.com/CrackerakiUA/ui-cropper/master/)

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](http://crackerakiua.github.io/ui-cropper) 
or pick a Codepen to play around with it 
[Codepen: Circle + Chargement Crop](http://codepen.io/Crackeraki/pen/avYNKP) 
[Codepen: Square + Init Url Crop + Maximum rendered image](http://codepen.io/Crackeraki/pen/QjmNVM) 
[Codepen: Rectangle Crop](http://codepen.io/Crackeraki/pen/XmEdPx) 
[Codepen: Rectangle Crop + Crop info](http://codepen.io/Crackeraki/pen/YqKwzZ) 
[Codepen: Rectangle With Aspect Crop and Max Init](http://codepen.io/Crackeraki/pen/zvWqJM) 
[Codepen: Rectangle + Aspect + Array Crop](http://codepen.io/Crackeraki/pen/jWgmYB) 
[Codepen: Rectangle + CSS Crop](https://codepen.io/Crackeraki/pen/YNExrw) 
[Codepen: Different sizes](http://codepen.io/Crackeraki/pen/RKjZLR)

## 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](https://gitter.im/CrackerakiUA/ui-cropper).

## Installing

#### Download directly
[Download ui-cropper](https://github.com/CrackerakiUA/ui-cropper/archive/master.zip) 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
<ui-cropper image="myImage" result-image="myCroppedImage"></ui-cropper>
```

## Documentation

You can checkout all options under [our wiki page](https://github.com/CrackerakiUA/ui-cropper/wiki/Options)

## 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](https://opencollective.com/ui-cropper#backer)]

## Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/ui-cropper#sponsor)]

## License

See the [LICENSE](https://github.com/CrackerakiUA/ui-cropper/blob/master/LICENSE) file

ui-cropper

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README