Popularity
7.9
Stable
Activity
2.3
Declining
7,803
335
1,820

Code Quality Rank: L5
Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
Tags: Image Processing     HTML     Jquery-plugin     JavaScript     Front-end     Plugin     jQuery     Css     Web     Zoom     Image     Development     Jqueryplugin     Scale     Rotate     Move     Cropping     Cropper     Crop     Processing     Cropper.js    
Latest version: v4.1.0

cropper alternatives and similar libraries

Based on the "Image Processing" category.
Alternatively, view cropper alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of cropper or a related project?

Add another 'Image Processing' Library

README

Cropper

Build Status Downloads Version Dependencies

A simple jQuery image cropping plugin. As of v4.0.0, the core code of Cropper is replaced with Cropper.js.

  • Demo
  • Cropper.js - JavaScript image cropper (recommended)
  • jquery-cropper - A jQuery plugin wrapper for Cropper.js (recommended for jQuery users to use this instead of Cropper)

Main

dist/
├── cropper.css
├── cropper.min.css   (compressed)
├── cropper.js        (UMD)
├── cropper.min.js    (UMD, compressed)
├── cropper.common.js (CommonJS, default)
└── cropper.esm.js    (ES Module)

Getting started

Installation

npm install cropper jquery

Include files:

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<link  href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>

Usage

Initialize with $.fn.cropper method.

<!-- Wrap the image or canvas element with a block element (container) -->
<div>
  <img id="image" src="picture.jpg">
</div>
/* Limit image width to avoid overflow the container */
img {
  max-width: 100%; /* This rule is very important, please do not ignore this! */
}
var $image = $('#image');

$image.cropper({
  aspectRatio: 16 / 9,
  crop: function(event) {
    console.log(event.detail.x);
    console.log(event.detail.y);
    console.log(event.detail.width);
    console.log(event.detail.height);
    console.log(event.detail.rotate);
    console.log(event.detail.scaleX);
    console.log(event.detail.scaleY);
  }
});

// Get the Cropper.js instance after initialized
var cropper = $image.data('cropper');

Options

See the available options of Cropper.js.

$('img').cropper(options);

Methods

See the available methods of Cropper.js.

$('img').once('ready', function () {
  $(this).cropper('method', argument1, , argument2, ..., argumentN);
});

Events

See the available events of Cropper.js.

$('img').on('event', handler);

No conflict

If you have to use other plugin with the same namespace, just call the $.fn.cropper.noConflict method to revert to it.

<script src="other-plugin.js"></script>
<script src="cropper.js"></script>
<script>
  $.fn.cropper.noConflict();
  // Code that uses other plugin's "$('img').cropper" can follow here.
</script>

Browser support

It is the same as the browser support of Cropper.js. As a jQuery plugin, you also need to see the jQuery Browser Support.

Contributing

Please read through our [contributing guidelines](.github/CONTRIBUTING.md).

Versioning

Maintained under the Semantic Versioning guidelines.

License

MIT © Chen Fengyuan


*Note that all licence references and agreements mentioned in the cropper README section above are relevant to that project's source code only.