Lightweight Image Cropping Plugin with jQuery - Cropbox

Lightweight Image Cropping Plugin with jQuery - Cropbox
File Size: 13.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.