Lightweight Image Cropping Plugin with jQuery - Cropbox

Cropbox is a lightweight jQuery image cropping plugin that creates a viewport around a given image allowing to move, zoom, resize and crop an image.

Basic usage:

1. Add jQuery library together with the jQuery cropbox plugin's JS and CSS files to your html page.

<link href="src/jquery.cropbox.css" rel="stylesheet">
  ...
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="src/jquery.cropbox.js"></script>

2. Include the jQuery mousewheel plugin for mouse wheel support.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js"></script>

3. Create a basic image cropper like this:

<div id="demo" class="cropbox">

  <!-- Crop area -->
  <div class="workarea-cropbox">
      <div class="bg-cropbox">
          <img class="image-cropbox">
          <div class="membrane-cropbox"></div>
      </div>
      <div class="frame-cropbox">
          <div class="resize-cropbox"></div>
      </div>
  </div>

  <!-- Crop buttons -->
  <div class="btn-group">
      <span class="btn btn-primary btn-file">
          <i class="glyphicon glyphicon-folder-open"></i>
          Browse <input type="file" accept="image/*">
      </span>
      <button type="button" class="btn btn-success btn-crop">
          <i class="glyphicon glyphicon-scissors"></i> Crop
      </button>
      <button type="button" class="btn btn-warning btn-reset">
          <i class="glyphicon glyphicon-repeat"></i> Reset
      </button>
  </div>

  <!-- Cropped image -->
  <div class="cropped panel panel-default">
      <div class="panel-heading"><h3 class="panel-title">Result of cropping</h3></div>
      <div class="panel-body">...</div>
  </div>

  <!-- Info of cropping -->
  <div class="form-group">
      <label>Info of cropping</label>
      <textarea class="data form-control" rows="5"></textarea>
  </div>
</div>

4. Initialize the image cropper.

$('#demo').cropbox({
  selectors: {
    inputInfo: '#demo textarea.data',
    inputFile: '#demo input[type="file"]',
    btnCrop: '#demo .btn-crop',
    btnReset: '#demo .btn-reset',
    resultContainer: '#demo .cropped .panel-body',
    messageBlock: '#message'
  },

  imageOptions: {
    class: 'img-thumbnail',
    style: 'margin-right: 5px; margin-bottom: 5px'
  },

  variants: [{
    width: 200,
    height: 200,
    minWidth: 180,
    minHeight: 200,
    maxWidth: 350,
    maxHeight: 350
  },{
    width: 150,
    height: 200
  }],

  messages: [
      'Crop a middle image.',
      'Crop a small image.'
  ]
  
});

Change log:

2017-04-18

• removed building scripts. added the event cb.cropped. small fixes.

---

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