Minimal Image Cropping Plugin With jQuery And Canvas - Pixelarity

File Size: 59.5 KB
Views Total: 15872
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Minimal Image Cropping Plugin With jQuery And Canvas - Pixelarity

Pixelarity is a very small, canvas based jQuery image cropping plugin which allows you to select/crop photos within a draggable area and then output the result as a normal image on the client side.

It also supports drawing on images and applying GreyScale, Chrome, Nova and Blur filters to images when needed.

How to use it:

1. Load the latest version of jQuery library and the jQuery pixelarity plugin's JavaScript & Stylesheet in your html page.

<link rel="stylesheet" href="pixelarity.css">
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- With Face Detection -->
<script src="pixelarity-face.min.js"></script>
<!-- Without Face Detection -->
<script src="pixelarity-faceless.min.js"></script>

2. Create a file input to select desired image you'd like to crop.

<input id="file" type="file" >

3. Create an empty img tag to display the cropped image.

<img id="result">

4. Enable the image cropping plugin as follows:

// with face detection
    var img =[0];
    if(!, false, function(res, faces){
      $("#result").attr("src", res);
      // Looping through the faces returned
      for(var i = 0; i < faces.length; i++){
      // Do something with the faces
    }, "jpg", 0.7, true)){
      alert("Whoops! That is not an image!");

// without face detection
    var img =[0];
    if(!, false, function(res){
      $("#result").attr("src", res);
    }, "jpg", 0.7)){
      alert("Whoops! That is not an image!");

5. Open the image editing interface. Available parameters:

  • imageObject: image object
  • square: crop the image to a square
  • callback: callback function
  • imageType: "jpeg", "png", "gif", or "bmp"
  • imageQuality: Image Quality (0-1)
  • face: if return any faces found in the image, square, callback, imageType, imageQuality, face);

6. Close the image editing interface.


7. Close the image crop interface.




  • Doc Updated
  • Demo Updated


  • Renamed to Pixelarity.


  • bug fixes in default settings.

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