WebGLImageFilter
Construct a chain of image filters and apply them to an Image or Canvas element. All filters are executed by WebGL Shaders which makes them pretty fast.
Demo: phoboslab.org/log/2013/11/webgl-image-filter
Please also have a look at the excellent glfx.js by @evanw.
Usage
// Synopsis: create the filter object, add filters to it and apply
// it to an image
// Example:
try {
var filter = new WebGLImageFilter();
}
catch( err ) {
// Handle browsers that don't support WebGL
}
filter.addFilter('hue', 180);
filter.addFilter('negative');
filter.addFilter('blur', 7);
// inputImage may be an Image, or even an HTML Canvas!
var filteredImage = filter.apply(inputImage);
// The 'filteredImage' is a canvas element. You can draw it on a 2D canvas
// or just add it to your DOM
// Use .reset() to clear the current filter chain. This is faster than creating a new
// WebGLImageFilter instance
filter.reset();
Using an Existing Canvas element
Internally, WebGLImageFilter creates one canvas element, which is what the output filtered result is written to.
If you have an existing canvas
element that you want to render to, you can configure WebGLImageFilter to use it:
try {
// in this case, filteredImage is an existing html canvas
var filter = new WebGLImageFilter({ canvas: filteredImage });
}
catch( err ) { }
// .. filters setup here
filter.apply(inputImage);
// at this point, filteredImage has already been updated
Filters
Main filters
colorMatrix( matrix )
apply a the 5x5 color matrix (Array[20]
), similar to Flash's ColorMatrixFilterconvolution( matrix )
apply a 3x3 convolution matrix (Array[9]
)blur( radius )
blur with radius in pixels
Presets using the main filters
brightness( amount )
change brightness.1
increases the it two fold,-1
halves itsaturation( amount )
change saturation.1
increases the it two fold,-1
halves itcontrast( amount )
change contrast.1
increases the it two fold,-1
halves itnegative()
invert colorshue( rotation )
rotate the hue, values are0-360
desaturate()
desaturate the image by all channels equallydesaturateLuminance()
desaturate the image taking the natural luminace of each channel into acocuntsepia()
sepia colorsbrownie()
vintage colorsvintagePinhole()
vintage colorskodachrome()
vintage colorstechnicolor()
vintage colorsdetectEdges()
detect edgessobelX()
detect edges using a horizontal sobel operatorsobelY()
detect edges using a vertical sobel operatorsharpen( amount )
sharpenemboss( size )
emboss effect with size in pixelspolaroid()
polaroid camera effectshiftToBGR()
shift colors from RGB to BGRpixelate(amount)
pixelate
License
MIT