Awesome Cropper
Awesome croper is jQuery plugin to produce form component that can upload images from local and remote destinations and set crop area.
WorkFlow:
- Select Image by File Select, Url or Drag'n'Drop
- Crop Image to specific size in modal window
- Upload image with selected area coords
Dependencies
- Twitter Bootstrap (for Boostrap 2 see this branch)
- jQuery
- imgAreaSelect
Usage
Load script and styles of plugin:
<script src="build/jquery.awesome-cropper.js"></script> <link rel="stylesheet" href="css/jquery.awesome-cropper.css">
Create cropping component on some hidden input:
<script> $(document).ready(function () { $('#sample_input').awesomeCropper( { width: 200, height: 200 } ); }); </script>
Options
width
: Width of cropped image height
: Height of cropped image Hidden input may looks like this:
<input id="sample_input" type="hidden" name="test[image]">