Lightweight jQuery Image Cropping Plugin - Crop Box

A simple lightweight JavaScript, YUI, jQuery plugin for image cropping with support for image zoom and image pan.

Basic Usage:

1. Add the jQuery library and the jQuery cropbox plugin in the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="cropbox.js"></script>

2. Create Html elements for the image cropping interface.

<div class="imageBox">
  <div class="thumbBox"></div>
  <div class="spinner" style="display: none">Loading...</div>
</div>

3. Create controls to load, zoom, pan and crop a given image.

<div class="action">
  <input type="file" id="file">
  <input type="button" id="btnCrop" value="Crop">
  <input type="button" id="btnZoomIn" value="+">
  <input type="button" id="btnZoomOut" value="-">
</div>

4. Create a container to place the cropped image.

<div class="cropped"> </div>

5. The Javascript to enable the plugin. It supports Blob for uploading image (function getBlobFile).

$(window).load(function() {
var options =
{
  thumbBox: '.thumbBox',
  spinner: '.spinner',
  imgSrc: 'avatar.png'
}
var cropper = $('.imageBox').cropbox(options);

$('#file').on('change', function(){
  var reader = new FileReader();
  reader.onload = function(e) {
  options.imgSrc = e.target.result;
  cropper = $('.imageBox').cropbox(options);
}

reader.readAsDataURL(this.files[0]);
this.files = [];
})

$('#btnCrop').on('click', function(){
  var img = cropper.getAvatar()
  $('.cropped').append('<img src="'+img+'">');
})

$('#btnZoomIn').on('click', function(){
  cropper.zoomIn();
})

$('#btnZoomOut').on('click', function(){
  cropper.zoomOut();
})

});

About Author:

Author: Nguyen Hong Khanh

Website: https://github.com/hongkhanh/cropbox

Change log:

2014-10-10

• optimize

---

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