# angular-cropper

> A simple image cropper angular.js (1.x) directive

Latest version **0.9.0** (published 2017-03-27) · ISC license · 0 weekly downloads

## Install

```sh
npm install angular-cropper
pnpm add angular-cropper
yarn add angular-cropper
bun add angular-cropper
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.9.0 |
| Published | 2017-03-27 |
| First published | 2015-08-03 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 24 |
| Author | twhitbeck |
| Maintainers | twhitbeck |
| Keywords | angular, angular.js, angularjs, crop, image, mobile, cropper |

## Links

- npm: https://www.npmjs.com/package/angular-cropper
- Repository: https://github.com/twhitbeck/angular-cropper
- Homepage: https://github.com/twhitbeck/angular-cropper#readme
- Issues: https://github.com/twhitbeck/angular-cropper/issues
- npm.io page: https://npm.io/package/angular-cropper

## Dependencies (1)

- [angular-file-reader](https://npm.io/package/angular-file-reader.md) ^1.0.0

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 0.9.0 (latest) — 2017-03-27
- 0.8.3 — 2015-11-30
- 0.8.2 — 2015-08-03
- 0.8.1 — 2015-08-03
- 0.8.0 — 2015-08-03

## README

angular-cropper
===============

> Touch-enabled image cropper for AngularJS

[Demo](http://plnkr.co/edit/s96ZCYmP5ELtqdIMieKC?p=preview)

### Get it
```sh
$ bower install angular-cropper
```

or

```sh
$ npm install angular-cropper
```

### Use it
* Include files in your html
  * `bower_components/angular-file-reader/angular-file-reader.js`
  * `bower_components/angular-cropper/angular-cropper.js`
* Include `tw.directives.cropper` in your module dependencies
  * `angular.module('myApp', ['tw.directives.cropper']);`
* Place the `tw-cropper` attribute on a canvas
  * `<canvas width="300" height="300" tw-cropper="cropper"></canvas>`
* Give your cropper a `source`
  * `<canvas width="300" height="300" tw-cropper="cropper" source="myFile"></canvas>`
  * `source` must be a File
  * See the demo for one way to get a File to your scope
  * Or use [twhitbeck/angular-file-input](https://github.com/twhitbeck/angular-file-input)
* Get the dataURL of your crop with controller `toDataURL` method
  * `<button ng-click="upload(cropper.toDataURL())">Save</button>`
* That's it!

---
_Source: https://npm.io/package/angular-cropper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._