cropper alternatives and similar libraries
Based on the "Image Processing" category.
Alternatively, view cropper alternatives based on common mentions on social networks and blogs.
-
fastimage
FastImage finds the size or type of an image given its URL by fetching as little as needed.
Get performance insights in less than 4 minutes
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest. Visit our partner's website for more details.
Do you think we are missing an alternative of cropper or a related project?
Popular Comparisons
|
SaaSHub - Software Alternatives and Reviews
Sponsored
www.saashub.com
|
README
Cropper
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
*Note that all licence references and agreements mentioned in the cropper README section above
are relevant to that project's source code only.