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]">