Javascript Image Processing Library | chobi

chobi is a small pure JavaScript image processing library that allows you to apply artboard canvas -based filters on any images you select.

The Chobi constructor takes 4 types of parameters

  • Input type[file] element var imgObj = new Chobi(document.getElementById("image-file");
  • Path to an 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');

Supported image filters:

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

How to make use of it:

1. Download the mini version of the chobo library and place it in the document.

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

2. 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');

3. Create an HTML5 panel element to place your image.

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

4. Convert photo or image to canvas.

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

5. Apply a filter (or a series of 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()

6. API Option.

// 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

Read Also – Add Custom Texts to Resize the Image | JQuery Image Maker

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

Client-side Image Processing Library, chobi Plugin/Github

Read More – 

Fallback Image If Main Image Fails And Add Loader | ngx-images
Responsive Image Carousel Bootstrap Style In Vanilla JavaScript


See Demo And Download

Official Website(jayankaghosh): Click Here

This superior jQuery/javascript plugin is developed by jayankaghosh. For extra Advanced Usage, please go to the official website.

Share