It is a little javascript library for you to add some effects on photos using HTML5 canvas
- Simple photo effects (example)
- Greyscale
- Threshold (example)
- Sepia
- Invert
- Adjustments (example)
- Brightness
- Contrast
- Gamma
- Hue
- Saturation
- Vibrance
- White Balance adjust (It can also generate a colour temp. chart)
- Equalization
- Special effects
- Glow (example)
- Noise (example)
- Color matrix (See here for details)
- HDR
- Old TV
- Convolution effects
- Custom n*n convolution matrix
- Box Blur (example)
- Emboss
- Sharpen
- Find Edges
- Add new effects (White Balance adjust).
- Add new examples: A colour chart and (3x3 custom convolution matrix).
- Added
fx.colorTempToRGB(temp)to convert colour temperstures to RGB values.
var canvas = document.getElementById('fx'); //the canvas object
var opts = {
useWorker:true, //Whether to use Web Worker to do the processing or not
workerPath:'./CanvasEffects.worker.min.js', //The path to the worker
width: 100, //Override the width of the original canvas
height: 100 //Override the height of the original canvas
}
var fx = new CanvasEffects(canvas,opts); //Initlize the CanvasEffect instance
//load the image
fx.load('pict.jpg', function(){
//call the effect methods
//for example,
this.greyscale();
this.blur(10);
this.sepia();
this.glow(5);
});
//effect methods can be chained
fx.sepia().gamma(1.1).blur(30).glow(5);
This is an active project. If you have any suggestions or having bugs please make it as an issue.