Lightweight jQuery Image Cropping Plugin - Crop Box

File Size: 1.18 MB
Views Total: 8737
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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>

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

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 =;
  cropper = $('.imageBox').cropbox(options);

this.files = [];

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

$('#btnZoomIn').on('click', function(){

$('#btnZoomOut').on('click', function(){


About Author:

Author: Nguyen Hong Khanh


Change log:


  • optimize

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