Lightweight Client-side Image Processing Library – chobi

Category: Image , Javascript | September 9, 2016
Author:jayankaghosh
Views Total:880 views
Official Page:Go to website
Last Update:September 9, 2016
License:MIT

Preview:

Lightweight Client-side Image Processing Library – chobi

Description:

chobi is a small, pure JavaScript image processing library which enables you to apply canvas based filters to any images you specify.

Supported image filters:

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

How to use it:

Download and place the minified version of chobo library into the document.

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

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

Create an HTML5 canvas element to place your image.

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

Convert the image to canvas.

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

Apply a filter (or chaining 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()

API.

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

You Might Be Interested In:


Leave a Reply