jQuery plugin to crop images on client by load from Drag'n'Drop, file select and URL
JavaScript CoffeeScript CSS Shell
Switch branches/tags
Nothing to show
Latest commit 8f75e31 Jun 18, 2014 @Andrew8xx8 Get bootstrap from cdn
Permalink
Failed to load latest commit information.
build Bootstrap 3 integrated Oct 16, 2013
components Get bootstrap from cdn Jun 18, 2014
css Bootstrap 3 integrated Oct 16, 2013
src Bootstrap 3 integrated Oct 16, 2013
README.md Bootstrap 3 integrated Oct 16, 2013
builder Bulder added Jan 28, 2013
index.html Get bootstrap from cdn Jun 18, 2014

README.md

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

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