Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/scottcheng/cropit
A "customizable crop and zoom" jQuery plugin.
https://github.com/scottcheng/cropit
Last synced: 17 days ago
JSON representation
A "customizable crop and zoom" jQuery plugin.
- Host: GitHub
- URL: https://github.com/scottcheng/cropit
- Owner: scottcheng
- License: mit
- Created: 2014-07-07T21:27:17.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2020-07-26T10:40:30.000Z (over 4 years ago)
- Last Synced: 2024-10-01T00:55:10.228Z (about 1 month ago)
- Language: JavaScript
- Homepage: http://scottcheng.github.io/cropit/
- Size: 20.8 MB
- Stars: 874
- Watchers: 42
- Forks: 304
- Open Issues: 145
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# cropit
[![CDNJS](https://img.shields.io/cdnjs/v/cropit.svg)](https://cdnjs.com/libraries/cropit)
[![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/cropit/badge?style=rounded)](https://www.jsdelivr.com/package/npm/cropit)Customizable crop and zoom.
See demos and docs [here](http://scottcheng.github.io/cropit/).
Built on top of [Yufei Liu's Image Editor](https://github.com/yufeiliu/simple_image_uploader).
## Installation
```bash
# Install cropit with bower
$ bower install cropit# or with npm
$ npm install cropit
```## Migrating to v0.5
v0.5 [introduced](https://github.com/scottcheng/cropit/blob/master/CHANGELOG.md#user-content-050-february-27-2016) rotation feature and improved performance, as well as a breaking changes in markup structure and class names.
Markup in v0.4:
```html
```New markup in v0.5:
```html
```Note that `.cropit-image-preview-container` element is no longer needed, and all you need is a `.cropit-preview` (previously `.cropit-image-preview`) whether or not you want image background that goes beyond the preview area. New markup structure (after cropit is initialized) is as follows:
```jade
.cropit-preview
.cropit-preview-background-container
img.cropit-preview-background
.cropit-preview-image-container
img.cropit-preview-image
```Note the class name changes:
```
.cropit-image-preview => .cropit-preview
.cropit-image-background-container => .cropit-preview-background-container
.cropit-image-background => .cropit-preview-background
```Make sure to update class names in your selectors.
## Development
* Build: `webpack`
* Watch for changes and rebuild: `webpack -w`
* Test: `npm test`
* Test specific file: `jest `
* Lint: `npm run jshint -s`## License
MIT