Resize/Rotate/Crop Images With jQuery - Cropzee

Cropzee is an easy, lightweight jQuery image cropper which enables the user to resize, rotate, crop, preview an image in an elegant modal popup.

Based on jQuery, Croppr.js, Light-Modal, and HTML5 canvas. Perfect for image upload and profile avatar components.

Choose an image from your computer, select an area (image) with mouse or touch, and click the Crop button. That's it.

How to use it:

1. Load the needed jQuery library in the html document.

<script src="/path/to/jquery.min.js" ></script>

2. Download and load the Cropzee plugin's script after jQuery.

<script src="/path/to/dist/cropzee.js" defer></script>

3. Create a file input that allows the user to select an images from the local.

<input id="cropzee-input" type="file" name="">

4. Add the data-cropzee attribute to an element which will be used to hold the cropped image.

<div id="" class="image-previewer" data-cropzee="cropzee-input"></div>

5. Create a button that get the image data (OPTIONAL).

<button onclick="cropzeeGetImage('cropzee-input')">Get Image (as blob / data-url)</button>

6. Initialize the plugin on the input field.

$(document).ready(function(){
  $("#cropzee-input").cropzee({
    // options here
  });
});

7. Set the allowed extensions.

$("#cropzee-input").cropzee({
  allowedInputs: ['gif','png','jpg','jpeg']
});

8. Set the cropped image/blob file-type.

$("#cropzee-input").cropzee({
  imageExtension: 'image/jpeg'
});

9. Set the image data mode to return, 'blob' for blob object or 'data-url' for dataURL.

$("#cropzee-input").cropzee({
  returnImageMode: 'data-url'
});

10. More configuration options.

$("#cropzee-input").cropzee({

  // custom aspect radio
  aspectRatio: null,

  // min/max sizes
  maxSize: { width: null, height: null },
  minSize: { width: null, height: null },

  // start size of crop region
  startSize: { width: 100, height: 100, unit: '%' }
  
});

11. Callback functions.

$("#cropzee-input").cropzee({

  onCropStart: function(data) {
    console.log(data.x, data.y, data.width, data.height);
  },
  onCropMove: function(data) {
    console.log(data.x, data.y, data.width, data.height);
  },
  onCropEnd: function(data) {
    console.log(data.x, data.y, data.width, data.height);
  },
  onInitialize: function(instance) {
    // do things here
  }

});

Changelog:

2020-01-06

• JS update

v2 (2019-10-10)

• Removed jQuery UI dependency.
• Added more functionalities.

---

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