Canvas Based Image Cropping Library For jQuery - Croppie

Canvas Based Image Cropping Library For jQuery - Croppie
File Size: 869 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

<link rel="stylesheet" href="croppie.css">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="croppie.js"></script>

2. Create an empty container for the image cropper.

<div id="demo"></div>

3. Enable the image cropper using jQuery method.

$('#demo').croppie();

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
  },

  // addiontal CSS class
  customClass: '',

  // show image zoom control
  showZoom: true,

  // image zoom with mouse wheel
  mouseWheelZoom: true,

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

5. API methods.

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

// get cropped image
$('#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
$('#demo').croppie('bind',{ 
  url: 'path/to/image.jpg', 
  points: [x1, y1, x2, y2] 
});

Change log:

2017-03-08

  • v2.4.1

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