# Cropper [![Build Status](https://img.shields.io/travis/fengyuanchen/cropper.svg)](https://travis-ci.org/fengyuanchen/cropper) [![Downloads](https://img.shields.io/npm/dm/cropper.svg)](https://www.npmjs.com/package/cropper) [![Version](https://img.shields.io/npm/v/cropper.svg)](https://www.npmjs.com/package/cropper) [![Dependencies](https://img.shields.io/david/fengyuanchen/cropper.svg)](https://www.npmjs.com/package/cropper) > A simple jQuery image cropping plugin. As of v4.0.0, the core code of Cropper is replaced with [Cropper.js](https://github.com/fengyuanchen/cropperjs). - [Demo](https://fengyuanchen.github.io/cropper) - [Cropper.js](https://github.com/fengyuanchen/cropperjs) - JavaScript image cropper (**recommended**) - [jquery-cropper](https://github.com/fengyuanchen/jquery-cropper) - A jQuery plugin wrapper for Cropper.js (**recommended** for jQuery users to use this instead of Cropper) ## Main ```text 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 ```shell npm install cropper jquery ``` Include files: ```html ``` ### Usage Initialize with `$.fn.cropper` method. ```html

``` ```css /* Limit image width to avoid overflow the container */ img { max-width: 100%; /* This rule is very important, please do not ignore this! */ } ``` ```js 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](https://github.com/fengyuanchen/cropperjs#options) of Cropper.js. ```js $('img').cropper(options); ``` ## Methods See the available [methods](https://github.com/fengyuanchen/cropperjs#methods) of Cropper.js. ```js $('img').once('ready', function () { $(this).cropper('method', argument1, , argument2, ..., argumentN); }); ``` ## Events See the available [events](https://github.com/fengyuanchen/cropperjs#events) of Cropper.js. ```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. ```html ``` ## Browser support It is the same as the [browser support of Cropper.js](https://github.com/fengyuanchen/cropperjs#browser-support). As a jQuery plugin, you also need to see the [jQuery Browser Support](http://jquery.com/browser-support/). ## Contributing Please read through our [contributing guidelines](.github/CONTRIBUTING.md). ## Versioning Maintained under the [Semantic Versioning guidelines](https://semver.org/). ## License [MIT](https://opensource.org/licenses/MIT) © [Chen Fengyuan](https://chenfengyuan.com)

	Stars	Issues	Version	Updated	Created
cropper	7,757	0	4.1.0	5 years ago	10 years ago
cropperjs	12,673	62	1.6.2	12 days ago	9 years ago
croppie			2.6.5	4 years ago	8 years ago
darkroom	1,385	56	2.0.0	9 years ago	9 years ago
smartcrop			2.0.5	3 years ago	10 years ago

cropper vs cropperjs vs croppie vs darkroom vs smartcrop

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past