Easy And Extensible Image Cropper – Cropbox

Cropbox is a simple, flexible, extensible JavaScript image cropper which enables the user to select and crop a specific part of your image with zoom in/out support.

Installation:

# NPM
$ npm install js-cropbox
# Bower
$ bower install js-cropbox

Basic usage:

Load the Cropbox’s files in the document and we’re ready to go.

<link href="build/cropbox.css" rel="stylesheet">
<script src="build/cropbox.js"></script>

Create a placeholder element for the image crop area.

<div id="plugin"></div>

Create the image select, crop, reset and zoom buttons as follows:

<div class="form-inline">
  <div class="form-group">
    <div class="btn-group">
      <span class="btn btn-info btn-file">
        <i class="glyphicon glyphicon-folder-open"></i>
        Browse <input type="file" accept="image/*">
      </span>
      <button type="button" class="btn btn-primary btn-start">
        <i class="glyphicon glyphicon-play"></i> Start
      </button>
    </div>
  </div>
  <div class="form-group">
    <div class="btn-group">
      <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>
      <button type="button" class="btn btn-default btn-scale-out">
        <i class="glyphicon glyphicon-minus"></i>
      </button>
      <button type="button" class="btn btn-default btn-scale-in">
        <i class="glyphicon glyphicon-plus"></i>
      </button>
    </div>
  </div>
</div>

Create a container element to display the cropped image:

<div id="cropped-container" class="panel panel-success">
  <div class="panel-heading"><h3 class="panel-title">Result of cropping</h3></div>
  <div class="panel-body"></div>
</div>

Create a container element to display the information of cropping.

<div class="panel panel-info">
  <div class="panel-heading"><h3 class="panel-title">Info of cropping</h3></div>
  <div class="panel-body">
    <textarea id="data" class="form-control" rows="5"></textarea>
  </div>
</div>

The example JavaScrpt to active the image cropper.

var cropbox = new Cropbox('#plugin', {
    variants: [
        {
            width: 200,
            height: 200,
            minWidth: 180,
            minHeight: 200,
            maxWidth: 350,
            maxHeight: 350
        },
        {
            width: 150,
            height: 200
        }
    ]
  });
  // scaling
  var scaleInBtn = document.querySelector('.btn-scale-in');
  scaleInBtn.addEventListener('click', function(){
      cropbox.scale(1.05);
  });
  var scaleOutBtn = document.querySelector('.btn-scale-out');
  scaleOutBtn.addEventListener('click', function(){
      cropbox.scale(0.95);
  });
  cropbox.getMembrane().addEventListener('wheel', function(event){
      if (event.deltaY < 0) {
          cropbox.scale(1.01);
      } else {
          cropbox.scale(0.99);
      }
      event.preventDefault();
  });
  // image loading from a file
  var fileInput = document.querySelector('input[type="file"]'),
      startBtn = document.querySelector('.btn-start');
  startBtn.addEventListener('click', function(){
      var fileReader = new FileReader();
      fileReader.readAsDataURL(fileInput.files[0]);
      fileReader.addEventListener('load', function(event){
          cropbox.load(event.target.result);
      });
  });
  // reset
  var resetBtn = document.querySelector('.btn-reset');
  resetBtn.addEventListener('click', function(){
      cropbox.reset();
  });
  // crop
  var cropBtn = document.querySelector('.btn-crop');
  cropBtn.addEventListener('click', function(){
      cropbox.crop();
  });
  // the cropped event
  cropbox.getCb().addEventListener('cb:cropped', function(event){
      // add image to the container
      var img = document.createElement('img');
      img.src = event.detail.data.image;
      img.setAttribute('style', 'margin-right: 5px; margin-bottom: 5px');
      img.className = 'img-thumbnail';
      document.querySelector('#cropped-container .panel-body').appendChild(img);
      // update inforamtion about crop
      document.querySelector('#data').value = JSON.stringify(cropbox.getData());
  });
  // the reset event
  function resetHandler(){
      // clear the container
      document.querySelector('#cropped-container .panel-body').innerHTML = '';
      // clear information about crop
      document.querySelector('#data').value = '';
  };
  cropbox.getCb().addEventListener('cb:reset', resetHandler);
  // the ready event
  cropbox.getCb().addEventListener('cb:ready', resetHandler);
  // the disabled/enabled event
  function disabledHandler(){
      scaleInBtn.setAttribute('disabled', 'disabled');
      scaleOutBtn.setAttribute('disabled', 'disabled');
      cropBtn.setAttribute('disabled', 'disabled');
  };
  disabledHandler();
  cropbox.getCb().addEventListener('cb:disabledCtrls', disabledHandler);
  cropbox.getCb().addEventListener('cb:enabledCtrls', function(){
      scaleInBtn.removeAttribute('disabled');
      scaleOutBtn.removeAttribute('disabled');
      cropBtn.removeAttribute('disabled');
  });