Feature-rich Image Cropping Plugin - jQuery Jcrop.js

File Size: 203 KB
Views Total: 16618
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Feature-rich Image Cropping Plugin - jQuery Jcrop.js

Jcrop is a robust jQuery image cropper plugin that provides a cross-browser, cross-platform, highly customizable image cropping tool for your web application.

Main features:

  • Easy to use.
  • Selectable, movable and resizable.
  • Custom styles.
  • Keyboard interactions.
  • Custom crop area with specific aspect ratio.
  • Smooth transitions.
  • Supports non-image elements.
  • Callbacks / Event Handlers.

Basic usage:

1. To get started, you need to load jQuery library and the Jcrop plugin's files as displayed below into the document.

<link rel="stylesheet" href="jquery.Jcrop.css" />
<script src="jquery.min.js"></script>
<script src="jquery.Jcrop.js"></script>

2. Then call the main function Jcrop() on the target image you want to crop. That's it!

<img src="sample.jpg" id="target" alt="">

3. All default options to config the image cropping tool as per your needs.


  // Basic Settings
  allowSelect: true,
  allowMove: true,
  allowResize: true,

  trackDocument: true,

  // Styling Options
  baseClass: 'jcrop',
  addClass: null,
  bgColor: 'black',
  bgOpacity: 0.6,
  bgFade: false,
  borderOpacity: 0.4,
  handleOpacity: 0.5,
  handleSize: null,

  aspectRatio: 0,
  keySupport: true,
  createHandles: ['n','s','e','w','nw','ne','se','sw'],
  createDragbars: ['n','s','e','w'],
  createBorders: ['n','s','e','w'],
  drawBorders: true,
  dragEdges: true,
  fixedSupport: true,
  touchSupport: null,

  shade: null,

  boxWidth: 0,
  boxHeight: 0,
  boundary: 2,
  fadeTime: 400,
  animationDelay: 20,
  swingSpeed: 3,

  minSelect: [0, 0],
  maxSize: [0, 0],
  minSize: [0, 0],

  // Callbacks / Event Handlers
  onChange: function () {},
  onSelect: function () {},
  onDblClick: function () {},
  onRelease: function () {}

4. API methods:

var myInstance = $('#target').Jcrop({
  // options here

// set selection

// animate selection to new selection

// Release current selection

// Query current selection values

// Query current selection values (interface)

// Enable Jcrop

// Disable Jcrop

// Destroy Jcrop


v3.0.3 (2018-09-14)

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