jquery-cropper
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:
<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<script src="/path/to/cropper.js"></script><!-- Cropper.js is required -->
<link href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/jquery-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.
$().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.
<script src="other-plugin.js"></script>
<script src="jquery-cropper.js"></script>
<script>
$.fn.cropper.noConflict();
// Code that uses other plugin's "$().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.
Versioning
Maintained under the Semantic Versioning guidelines.
4 May 3, 2022
14 Jan 3, 2023
1 Feb 15, 2022
7.8k Dec 27, 2022
49 Dec 30, 2022
17 May 9, 2022
10 Aug 22, 2022
46 Dec 30, 2022
6.9k Dec 31, 2022
2.7k Jan 3, 2023
53 Oct 28, 2022
790 Nov 28, 2022
2.9k Dec 16, 2022
175 Dec 25, 2022
1.1k Dec 27, 2022
4k Jan 9, 2023
7k Jan 9, 2023
34 Dec 28, 2022
124 Dec 16, 2022