The Image Processing Library made in pure Javascript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


The Image Processing Library made in pure Javascript

oroginalpencil sketchcross process


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