A jQuery image cropping plugin.
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 $.fn.cropper
method.
<img class="cropper" src="picture.jpg">
$(".cropper").cropper({
aspectRatio: 16/9,
modal: false,
preview: ".extra-preview",
done: function(data) {
console.log(data);
}
});
Setup with $("#target").cropper(options)
, or global setup with $.fn.cropper.setDefaults(options)
.
- type: number
- default: 1
The aspect ratio of the cropping zone. e.g., "2", "1.3", "0.5", etc..
- type: function
- default:
function(data) {}
The function will be passed a object data and run when the cropping zone was moving.
- type: boolean
- default: true
Show (true) or hide (false) the black modal layer.
- type: string
- default: ""
A jquery selector string, add extra elements to show preview.
Enable the cropper, use with $("#target").cropper("enable")
.
Disable the cropper, use with $("#target").cropper("disable")
.