Need help with jquery-cropper?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

fengyuanchen
494 Stars 199 Forks MIT License 24 Commits 1 Opened issues

Description

A jQuery plugin wrapper for Cropper.js.

Services available

!
?

Need anything else?

Contributors list

jquery-cropper

Build Status Coverage Status Downloads Version

A jQuery plugin wrapper for Cropper.js.

Main

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

Getting started

Installation

npm install jquery-cropper jquery cropperjs

Include files:


Usage

Initialize with

$.fn.cropper
method.
/* 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.

$().cropper(options);

Methods

See the available methods of Cropper.js.

$().cropper('method', argument1, , argument2, ..., argumentN);

Events

See the available events of Cropper.js.

$().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.

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.

Versioning

Maintained under the Semantic Versioning guidelines.

License

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.