Filtr
Filtr is a powerful experimental, unobtrusive and library agnostic Javascript Image Filtering Library. Filtr is utilizing the HTML5 canvas element providing access to pixel information. Hence, Filtr is only available on browsers with Canvas support (Firefox, Opera, Safari 4) but degrades gracefully (if possible) to proprietary filters if used with Internet Explorer.
You can download the library at Github, example page can be found here. I recommend to use YUI compressor and then GZIP it.
Find below a list of all filters available through Filtr Library:
- Adjust HSBA
- Adjust RGBA
- Adjust YUVA
- Alpha
- Blend
- Blur
- Blur (motion)
- Blur (smooth)
- Blur (spin)
- Blur (zoom)
- Brightness
- Chroma
- Chroma HSB
- Color Histogram
- Contrast
- Crop
- Duotone
- Edge Detection
- Emboss
- Exposure
- Flip (horizontal/vertical)
- Gamma Correction
- Glow
- Gray
- Histogram
- Hue/Saturation/Lightness
- Invert
- Invert Alpha
- Interlace
- Laplace
- Lighten
- Mix RGB
- Monochrome
- Noise
- Outline
- Pixelate
- Pointillize
- Posterize
- Reflection
- Remove Noise
- Resize
- Rotate
- Scatter
- Screen
- Sepia
- Sharpen
- Solarize
- Tritone
- Unred Eyes
- Unsharp Mask
Browser compatibility
For full compatibility, a browser with canvas support is required (Safari 4, Firefox 2+, Opera 9.5+). Some filters have been simulated using inbuilt Internet Explorer filters, but the list is not worth mentioning. Fastest experience – as expected – in Webkit. Please note that images have to reside on same host than the page to avoid security infringements.
Usage
Javascript
Usage is pretty straightforward. The method mn.filtr.applyImageFilter receives the image element, the filters name and an options object. It will return the resulting image. Example:
window.onload = function() {
var img, img_new;
if ( ( img = document.getElement( "theimage" ) ) && img.complete ) {
img_new = mn.filtr.applyImageFilter( img, "blurmotion", {
distance: 10,
angle: 90
} );
}
};
CSS
Of course you can make Filtr automatically apply filters to specific images by using the class attribute in an element. Options can be specified as a querified string in square brackets. If you want to apply more than one filter to a certain image, simply use a spacer as delimiter. Examples:
Please refer to the source code for available options (I will document it later, promise!). Boolean values can be passed as ‘true’, ‘on’, ‘enabled’, ‘false’, ‘off’, ‘disabled’, Colors can be passed in Hex notation.
Prototype/jQuery
Filtr ships with handy shortcuts for Prototype and jQuery. If one of these libraries is in place you can use the code shown below, calls are chainable:
var options = {
/*whatever*/
};
$( '#mypic' ).filtr( 'gray', options );