Easy jQuery Image Cropper - Cropimg.js

Cropimg.js is a lightweight jQuery image cropping plugin that allows you to zoom, resize, move and crop a given image within a fixed-size crop region.

How to use it:

1. To use the image cropper start with adding the following JavaScript and CSS files in your html file:

<link rel="stylesheet" href="cropimg.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.mousewheel.js"></script>
<script src="cropimg.jquery.js"></script>

2. Embed an image you want to crop into the webpage.

<img src="cropimg.jpg" alt="crop img" class="cropimg">

3. Activate the image cropper by just calling the function on the image.

$('img.cropimg').cropimg({
  // settings here
});

4. All default settings to customize the image cropper and cropped image.

$('img.cropimg').cropimg({
  
  // The maximum width of the image container.
  maxContainerWidth: null,
  
  // Width of the cropped image
  resultWidth: 100,
  
  // Height of the cropped image
  resultHeight: 100,
  
  // Prefix of the inputs, where plugin introduce values of cropping.
  inputPrefix: '',
  
  // Zoom delay in ms
  zoomDelay: 400,
  
  // one mouse scroll = 10 clicks on Zoom in button
  mouseWheelZoomTimes: 10,

  // Zoom step
  zoomStep: 1,
  
  // Shows tips on hover
  showBtnTips: true,

  // Disable/enable buttons
  displayZoomingButtons: true,
  displayFixingPositionsButtons: true,
  displayFixingSizeButtons: true,
  
  // Fading time in ms
  btnTipsFadeTime: 100,
  
  // Custom text
  textBtnTipZoomIn: 'Zoom in',
  textBtnTipZoomOut: 'Zoom out',
  textBtnTipRTW: 'Resize to container width',
  textBtnTipRTH: 'Resize to container height',
  textBtnTipFPTL: 'Move image to Top Left Corner',
  textBtnTipFPTC: 'Move image to Top Center',
  textBtnTipFPTR: 'Move image to Top Right Corner',
  textBtnTipFPCL: 'Move image to Center Left',
  textBtnTipFPCC: 'Move image to Center of container',
  textBtnTipFPCR: 'Move image to Center Right',
  textBtnTipFPBL: 'Move image to Bottom Left Corner',
  textBtnTipFPBC: 'Move image to Bottom Center',
  textBtnTipFPBR: 'Move image to Bottom Right Corner',
  
  // Callback functions
  onInit: function() {},
  onChange: function(w, h, x, y, img) {}
  
});

---

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