Author: | jayankaghosh |
---|---|
Views Total: | 1,197 views |
Official Page: | Go to website |
Last Update: | September 9, 2016 |
License: | MIT |
Preview:

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