Simple jQuery Client Side Image Cropping Plugin - Awesome Cropper

File Size: 177 KB
Views Total: 37948
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

How to use it:

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

<link rel="stylesheet" href="">
<script src=""></script>

<script src=""></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.

$(document).ready(function () {
width: 150, 
height: 150, 
debug: false

Change log:


  • 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.