Lightweight Client-side Image Processing Library – chobi

chobi is a small, pure JavaScript image processing library which enables you to apply canvas based filters to any images you specify.

Supported image filters:

• Black and white
• sepia
• negative
• vintage
• crossprocess
• Brightness increase
• Brightness decrease
• Contrast increase
• Contrast decrease
• Noise
• Cartoon
• Vignette
• Crayon

How to use it:

Download and place the minified version of chobo library into the document.

<script src="src/Chobi.min.js"></script>

Create a new Chobi object and specify the path to your images.

var imgObj = new Chobi(document.getElementById("image-file");
// or
var imgObj = new Chobi("img.jpg");
// or
imgObj = new Chobi(new Image(...));
// or
imgObj = new Chobi(document.getElementById('myimg');

Create an HTML5 canvas element to place your image.

<canvas width="800" height="500" id="canvas"></canvas>

Convert the image to canvas.

imgObj.ready(function(){
  this.loadImageToCanvas(document.getElementById("canvas"));
}

Apply a filter (or chaining filters) of your choice to the image.

// Black And White 
imgObj.blackAndWhite()
// Sepia 
imgObj.sepia()
// Negative 
imgObj.negative()
// Vintage 
imgObj.vintage()
// Cross 
ProcessimgObj.crossProcess()
// Brightness 
imgObj.brightness(amount)
// Contrast 
imgObj.contrast(amount)
// Crop 
imgObj.crop(xCord,yCord,width,height)
// Noise effect 
imgObj.noise()
// Crayon effect 
imgObj.crayon()
// Cartoonify
imgObj.cartoon()
// Vignette 
imgObj.vignette(amount)
// Filter chaining 
imgObj.brightness(-5).sepia().negative()

API.

// Black And White 
imgObj.blackAndWhite()
// Sepia 
imgObj.sepia()
// Negative 
imgObj.negative()
// Vintage 
imgObj.vintage()
// Cross 
ProcessimgObj.crossProcess()
// get an Image Element
imgObj.getImage()
// get the Image Data, like width, height and pixel information
imgObj.extractImageData()
// download as an image
imgObj.download(filename,filetype)
// get the r,g,b,a values at the x,y coordinate
imgObj.getColorAt(x,y)
// set the Color at x,y coordinate with colorObj. ColorObj has the following format {red: redValue, green: greenValue, blue: blueValue, alpha: alphaValue}
imgObj.setColorAt(x,y,colorObj)
// get the width of the image
imgObj.imageData.width
// get the height of the image
imgObj.imageData.height