Simple jQuery Client Side Image Cropping Plugin - Awesome Cropper

Awesome Cropper is a jQuery plugin which allows you to select an image from local and crop it to a specific size by mouse dragging in a popup window.

See also:

• Facebook Style Image Cropping Plugin For jQuery - Drag'n'crop
• Easy jQuery Image Cropping Plugin with Live Previews - Image Cropper
• jQuery Client Side Image Cropping Plugin with Canvas and CSS3 - Simple Cropper
• jQuery Plugin For Cropping Images - Fakecrop
• jQuery Plugin for Image Cropping Functionality - imgAreaSelect

How to use it:

1. Include the jQuery library together with Bootstrap 3 and jQuery imgAreaSelect plugin in the page.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link href="imgareaselect-default.css" rel="stylesheet">
<script src="jquery.imgareaselect.js"></script> >

2. Include the jQuery Awesome Cropper plugin after jQuery library.

<link rel="stylesheet" href="css/jquery.awesome-cropper.css">
<script src="build/jquery.awesome-cropper.js"></script> 

3. Create a hidden input in the document.

<input id="demo" type="hidden" name="test[image]">

4. Call the plugin on the input and specify the size you want to crop an image to.

<script>
$(document).ready(function () {
$('#demo').awesomeCropper({ 
width: 150, 
height: 150, 
debug: false
});
});
</script>

Change log:

2018-02-08

• Refresh preview before selecting an area

---

This awesome jQuery plugin is developed by Andrew8xx8. For more Advanced Usages, please check the demo page or visit the official website.