chobi

The Image Processing Library made in pure Javascript

##Usage

Include the Javascript file like this

<script type="text/javascript" src="src/Chobi.min.js></script

Then make a new object of Chobi

The Chobi constructor takes 4 types of parameters

Input type[file] element var imgObj = new Chobi(document.getElementById("image-file");
Path to image file var imgObj = new Chobi("myimage.jpg");
Image Object var imgObj = new Chobi(new Image(...));
IMG Element var imgObj = new Chobi(document.getElementById('myimg');

To execute a function whenever the Chobi object is loaded

Call the ready(callback) method imgObj.ready(function(){this.loadImageToCanvas(document.getElementById("canvas"));}

To set the default canvas element imgObj.canvas = document.getElementById("canvas") Then you can directly call loadImageToCanvas() method without any parameters, and it will load the image to the default canvas

Then call various filter methods on the Chobi object

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)
Resize imgObj.resize(width,height)
Watermark imgObj.watermark(imgElem,amount,x,y,width,height,callback)
Method chaining is also possible imgObj.brightness(-5).sepia().negative().loadImageToCanvas()

To load the Image to a canvas - Call the loadImageToCanvas() method on the Chobi object

To get an Image Element From the Chobi Object - Call the getImage() method on the Chobi object

To get the Image Data, like width, height and pixel information - Call the extractImageData() method on the Chobi object

To download the Chobi object as an image - Call the download(filename,filetype) method on the Chobi object

To make your own filter you may use the following methods

imgObj.getColorAt(x,y) to get the r,g,b,a values at the x,y coordinate
imgObj.setColorAt(x,y,colorObj) to set the Color at x,y coordinate with colorObj. ColorObj has the following format {red: redValue, green: greenValue, blue: blueValue, alpha: alphaValue}
imgObj.imageData.width to get the width of the image
imgObj.imageData.height to get the height of the image

For further implementation example, refer the index.html file

jayankaghosh/chobi

chobi