Github url


by fengyuanchen

fengyuanchen /cropper

⚠️ [Deprecated] No longer maintained, please use

7.8K Stars 1.8K Forks Last release: 9 months ago (v4.1.0) MIT License 953 Commits 63 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:


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)


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


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>


Initialize with



<!-- Wrap the image or canvas element with a block element (container) -->
/\* 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 = $'cropper');


See the available options of Cropper.js.



See the available methods of Cropper.js.

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


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


method to revert to it.

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

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.


Please read through our contributing guidelines.


Maintained under the Semantic Versioning guidelines.


MIT © Chen Fengyuan

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.