Pixelarity.

Pixelarity is a JavaScript library which allows you to add an image cropping and modifying interface to your website. You no longer need to create advanced image processing scripts in WebGL; all you need to do is provide pixelarity with the image files and deal with the image modified by the user. No need to make your own interface or hassle around with aspect ratios, resolutions and file types; pixelarity has you covered. Just include the script and the style files and call the functions. That is it.

Usage

To use pixelarity, just include pixelarity's script file and the style file. jQuery is the only dependancy and must included as well.

API

• pixelarity.open()

  Opens the image editor with the provided image object. The image modified by the user it supplied to the callback as a DataURI. Additional settings are supplied as parameters to pixelarity.open().

  Syntax and Parameter

  pixelarity.open(imageObject, square, callback, imageType, imageQuality, face)
  • imageObject
    Required - A File object of the image to be edited. The File should be a valid image.
  • square
    Optional - Boolean value specifying if the image cropped by the user should only be a square. If true, users can only can crop the image to be a square.
    Default:false
  • callback
    Optional - A function to use the image cropped by the user. The image cropped by the user is supplied to the function as the first parameter. If the face parameter of the .open() is set to true, the second parameter supplied to the callback is an array of objects of faces detected. Each object has the following properties:
    1. .x
    : X co-ordinate of the face from the top-left of the image.
    2. .y
    : Y co-ordinate of the face from the top-left of the image.
    3. .height
    : Height of the face.
    4. .x
    : Width of the face.
  • imageType
    Optional - A String specifying the type of the image returned to the callback function. Possible values are: "jpeg", "png", "gif" ,"bmp".
    Default:"jpeg"
  • imageQuality
    Optional - A Number greater than 0 and less that or equal to 1 specifying the quality of the image returned to the callback function.
    Default:1
  • face
    Optional - A boolean value specifying if pixelarity should return any faces found in the image. This option is only available if you include pixelarity-face.js or pixelarity-face.min.js
    Default:false

  Return Values

  Returns true if the image supplied is valid. Returns false if the image supplied is not a valid image. The return can be used to check if the image supplied is valid and take appropriate actions.

  Example - 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!");
  		}
  	});
  });
  
  
  

  Example - With face detection

  pixelarity-face.js or pixelarity-face.min.js must be included for this to work!

  
  $(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<br>
  		for(var i = 0; i < faces.length; i++){
  			// Do something with the faces //
  		}
  	}, "jpg", 0.7, true)){
  		alert("Whoops! That is not an image!");
  	}
  });
  
  });
  
  
  

• pixelarity.close()

  Closes the image editior without calling the callback supplied to pixelarity.open(). pixelarity.close() is called when the user clicks on the cancel button in the image editor.

  Syntax

  pixelarity.close()

• pixelarity.status

  Contains a boolean value specifying if the image editor is open or not. If true, the image editor is open, else it is not.