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