# croppie

> A simple javascript image cropper

Latest version **2.6.5** (published 2020-06-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install croppie
pnpm add croppie
yarn add croppie
bun add croppie
```

## Health

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

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.6.5 |
| Published | 2020-06-16 |
| First published | 2015-11-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/croppie) |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 90.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2626 |
| Maintainers | dbsy9d |
| Keywords | crop, cropper, image, cropping |

## Links

- npm: https://www.npmjs.com/package/croppie
- Repository: https://github.com/Foliotek/Croppie
- Homepage: http://foliotek.github.io/Croppie
- Issues: https://github.com/Foliotek/Croppie/issues
- npm.io page: https://npm.io/package/croppie

## 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

- 2.6.5 (latest) — 2020-06-16
- 2.0.0-beta1 (beta) — 2016-02-15
- 2.6.4 — 2019-04-10
- 2.6.3 — 2019-01-21
- 2.6.2 — 2018-03-16
- 2.6.1 — 2018-02-05
- 2.5.1 — 2017-10-19
- 2.5.0 — 2017-07-14
- 2.4.1 — 2017-03-07
- 2.4.0 — 2016-10-21
- 2.3.0 — 2016-08-05
- 2.2.0 — 2016-06-23
- 2.1.1 — 2016-05-24
- 2.1.0 — 2016-04-09
- 2.0.2 — 2016-03-18
- … 9 more at https://npm.io/package/croppie/versions

## README

# Croppie - A Javascript Image Cropper


## To Install
Bower: `bower install croppie`

Npm: `npm install croppie`

Download:
[croppie.js](croppie.js) & [croppie.css](croppie.css)

## Adding croppie to your site
```html
<link rel="stylesheet" href="croppie.css" />
<script src="croppie.js"></script>
```

## CDN
cdnjs.com provides croppie via cdn https://cdnjs.com/libraries/croppie
```
https://cdnjs.cloudflare.com/ajax/libs/croppie/{version}/croppie.min.css
https://cdnjs.cloudflare.com/ajax/libs/croppie/{version}/croppie.min.js
```


## Documentation
[Documentation](http://foliotek.github.io/Croppie#documentation)

## Related Libraries
* [croppie-dart](https://gitlab.com/michel.werren/croppie-dart)
* [ngCroppie](https://github.com/allenRoyston/ngCroppie)
* [angular-croppie](https://github.com/lpsBetty/angular-croppie)
* [django-croppie](https://github.com/dima-kov/django-croppie)
* [vue-croppie](https://github.com/jofftiquez/vue-croppie)

## Contributing
First, thanks for contributing.  This project is difficult to maintain with one person.  Here's a "checklist" of things to remember when contributing to croppie.
* Don't forget to update the documentation.
* If you're adding a new option/event/method, try adding to an example on the documentation.  Or create a new example, if you feel the need.
* We don't have tests for Croppie :( (if you want to create tests I'd be forever grateful), so please try to test the functionality you're changing on the demo page.  I've tried to add as many use-cases as I can think of on there.  Compare the functionality in your branch to the one on the official page.  If they all still work, then great!

If you're looking for a simple server to load the demo page, I use https://github.com/tapio/live-server.

#### Minifying
`uglifyjs croppie.js -c -m -r '$,require,exports' -o croppie.min.js`

#### Releasing a new version
For the most part, you shouldn't worry about these steps unless you're the one handling the release.  Please don't bump the release and don't minify/uglify in a PR.  That just creates merge conflicts when merging.  Those steps will be performed when the release is created.
1. Bump version in croppie.js
2. Minify/Uglify
3. Commit
4. npm version [new version]
5. `git push && git push --tags`
6. `npm publish`
7. Draft a new release with new tag on https://github.com/Foliotek/Croppie/releases
8. Deploy to gh-pages `npm run deploy`

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