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
$(document).ready(function(){
  $("#file").change(function(e){
    var img = e.target.files[0];
    if(!pixelarity.open(img, false, function(res, faces){
      $("#result").attr("src", res);
      $(".face").remove();
      // 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
$(document).ready(function(){
  $("#file").change(function(e){
    var img = e.target.files[0];
    if(!pixelarity.open(img, 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

pixelarity.open(imageObject, square, callback, imageType, imageQuality, face);

6. Close the image editing interface.

pixelarity.close();

7. Close the image crop interface.

pixelarity.close();

Changelog:

2019-12-02

• Doc Updated
• Demo Updated

2019-12-01

• Renamed to Pixelarity.

2017-04-08

• 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.