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

$('#target').Jcrop();

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

$('#target').Jcrop({

  // 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
myInstance.setSelect(array)

// animate selection to new selection
myInstance.animateTo(array)

// Release current selection
myInstance.release()

// Query current selection values
myInstance.tellSelect()

// Query current selection values (interface)
myInstance.tellScaled()

// Enable Jcrop
myInstance.enable()

// Disable Jcrop
myInstance.disable()

// Destroy Jcrop
myInstance.destroy()

Changelog:

v3.0.3 (2018-09-14)

• JS Update

---

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