angular-img-cropper

An image cropping tool for AngularJS. Features a rectangular crop area. The crop area's aspect ratio can be enforced during dragging. The crop image can either be 1:1 or scaled to fit an area.

Screenshot

!Screenshot

Live demo

Live demo on JSBin

Requirements

- Modern Browser supporting ```

Installing

$3

- Download angular-img-cropper files from GitHub.

Or

- Install with Bower

`javascript
bower install angular-img-cropper
`

$3

Add the image cropper module as a dependancy to your application module:
`javascript
angular.module('myApp', ['angular-img-cropper']);
`

Options


| Parameter | Description |
| ------ | ----------- |
| crop-width | The width of the crop area|
| crop-height | The height of the crop area|
| image | The source image to crop|
| cropped-image (optional) | The cropped image|
| keep-aspect | Enforces that the aspect ratio is kept when dragging the crop area. The aspect ratio is defined by the width and height paramater. |
| touch-radius | The radius for detecting touches/clicks on the corner drag markers and the centre drag marker. |
| crop-area-bounds (optional) | A model that will be automatically updated with the bounds (left, right, top, bottom) of the crop area relative to the original source image.
| min-width (optional) | The minimum width that the crop area can be set to.
| min-height (optional) | The minimum height that the crop area can be set to.
| cors (optional) | Allows images loaded from foreign origins to be used in canvas as if they were being loaded from the current origin (MDN). Default: no

Example usage

#### Markup example

`html












Cropped Image (Left: {{bounds.left}} Right: {{bounds.right}} Top: {{bounds.top}} Bottom: {{bounds.bottom}})

License

See the LICENSE file.