Canvas Based Image Cropping Library For jQuery - Croppie

Croppie is an Html5 canvas based image cropping library that lets you create a square or circular viewport permitting to visually resize an image while preserving aspect ratio and perform a crop.

Also can be used as a jQuery plugin.

Basic usage:

1. Include the croppie library and other resources in your html file.

<!-- Stylesheet -->
<link rel="stylesheet" href="croppie.css" />
<!-- jQuery is optional -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- croppie.js -->
<script src="croppie.js"></script>

2. Create an empty container or even an image for the image cropper.

<div id="demo"></div>
<img id="image-demo" src="1.jpg" />

3. Generate a basic image cropper.

// As a jQuery plugin
$('#demo').croppie({
  url: '1.jpg',
});
$('#image-demo').croppie();

// As a Vanilla JavaScript plugin
var instance = new Croppie(document.getElementById('demo'), {
    url: '1.jpg'
});
var instance = new Croppie(document.getElementById('image-demo'));

4. Available options to customize your image cropper.

$('#demo').croppie({

  // viewport options
  viewport: {
    width: 100,
    height: 100,
    type: 'square' // or 'circle'
  },

  // boundary options
  boundary: {
    width: 300,
    height: 300
  },

  // orientation controls
  orientationControls: {
    enabled: true,
    leftClass: '',
    rightClass: ''
  },

  // resize controls
  resizeControls: {
    width: true,
    height: true
  },

  // addiontal CSS class
  customClass: '',

  // enable image zoom
  enableZoom: true,

  // enable image resize
  enableResize: false,

  // show image zoom control
  showZoomer: true,

  // image zoom with mouse wheel
  mouseWheelZoom: true,

  // enable exif orientation reading
  enableExif: false,

  // restrict zoom so image cannot be smaller than viewport
  enforceBoundary: true,

  // enable orientation
  enableOrientation: false,

  // enable key movement
  enableKeyMovement: true,

  // callback
  update: function () { }
  
});

5. API methods.

// get result from croppie
$('#demo').croppie('get');

/* get cropped image
   result({ type, size, format, quality, circle })
   type: The type of result to return:
     'base64':  returns a the cropped image encoded in base64
     'html': returns html of the image positioned within an div of hidden overflow
     'blob': returns a blob of the cropped image
     'rawcanvas': returns the canvas element allowing you to manipulate prior to getting the resulted image
   size: The size of the cropped image defaults to 'viewport'
     'viewport': the size of the resulting image will be the same width and height as the viewport
     'original': the size of the resulting image will be at the original scale of the image
     {width, height}: an object defining the width and height. If only one dimension is specified, the other will be calculated using the viewport aspect ratio.
   format: The image format. Valid values:'jpeg'|'png'|'webp'
   quality: between 0 and 1 indicating image quality.
   circle: force the result to be cropped into a circle
*/
$('#demo').croppie('result', 'canvas').then(function (img) {
  //img is html positioning & sizing the image correctly if resultType is 'html'
  //img is base64 url of cropped image if resultType is 'canvas' 
});

/* bind an image to croppie
   bind({ url, points, orientation, zoom })
   url: URL to image
   points: Array of points that translate into [topLeftX, topLeftY, bottomRightX, bottomRightY]
   zoom: Apply zoom after image has been bound
   orientation: Custom orientation: 
     1: unchanged
     2: flipped horizontally
     3: rotated 180 degrees
     4: flipped vertically
     5: flipped horizontally, then rotated left by 90 degrees
     6: rotated clockwise by 90 degrees
     7: flipped horizontally, then rotated right by 90 degrees
     8: rotated counter-clockwise by 90 degrees
*/
$('#demo').croppie('bind',{ 
  url: 'path/to/image.jpg', 
  points: [x1, y1, x2, y2] 
});

7. Event handler.

// As a jQuery plugin
$('.my-element').on('update.croppie', function(ev, cropData) {
  // do something
});

// As a Vanilla JavaScript plugin
document.getElementById('#my-element').addEventListener('update', function(ev) { 
  var cropData = ev.detail; 
});

Changelog:

2019-12-01

• Small release to fix an issue with an unassigned variable.

---

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