https://github.com/scottcheng/cropit

A "customizable crop and zoom" jQuery plugin.
https://github.com/scottcheng/cropit

Last synced: 18 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