# angular-img-cropper > Client side image cropper directive for AngularJS (rectangular area, aspect ratio, multi-touch) Latest version **0.0.2** (published 2016-02-05) · MIT license · 0 weekly downloads ## Install ```sh npm install angular-img-cropper pnpm add angular-img-cropper yarn add angular-img-cropper bun add angular-img-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.0.2 | | Published | 2016-02-05 | | First published | 2016-01-14 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 172 | | Author | Allan Bishop | | Maintainers | graingert | | Keywords | angular, cropper, image, img, rectangle, aspect, crop | ## Links - npm: https://www.npmjs.com/package/angular-img-cropper - Repository: https://github.com/AllanBishop/angular-img-cropper - Homepage: https://github.com/AllanBishop/angular-img-cropper#readme - Issues: https://github.com/AllanBishop/angular-img-cropper/issues - npm.io page: https://npm.io/package/angular-img-cropper ## 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.0.2 (latest) — 2016-02-05 - 0.0.1 — 2016-01-14 ## README # 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](https://raw.githubusercontent.com/AllanBishop/ImageCropper/master/screenshots/screenshot.jpg "Screenshot") ## Live demo [Live demo on JSBin](http://jsbin.com/fukeqe/9/) ## Requirements - Modern Browser supporting `````` ## Installing ### Download - [Download angular-img-cropper](https://github.com/AllanBishop/angular-img-cropper/archive/master.zip) files from GitHub. Or - Install with Bower ```javascript bower install angular-img-cropper ``` ### Add dependency 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](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image)). *Default: no* ## Example usage #### Markup example ```html Example
Cropped Image (Left: {{bounds.left}} Right: {{bounds.right}} Top: {{bounds.top}} Bottom: {{bounds.bottom}})
``` ## License See the [LICENSE](https://github.com/AllanBishop/ImageCropper/blob/master/LICENSE.md) file. --- _Source: https://npm.io/package/angular-img-cropper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._