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

Supported image filters:

• 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, values at the x,y coordinate
• imgObj.setColorAt(x,y,colorObj) to set the Color at the 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

Must Read: (base64) Pure JavaScript Image Cropping Functionality To Your Web | js-cropper

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

See Also –

Free Pure JavaScript Image Zooming Library | Lightense.js
Simple Javascript Image Viewer Component for Vue 2
Perfect Image Comparison Slider In vanilla javascript | sliderBeforeAfter

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.