Projects // 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) but degrades gracefully (if possible) to proprietary filters if used with Internet Explorer.

Supported filters are: Adjust Color (HSBA/RGBA/YUVA), Alpha, Blend, Blur (including motion, smooth, spin, 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.

Demo Visit Github

Browser compatibility

For full compatibility, a browser with canvas support is required (Safari, 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

For full compatibility, a browser with canvas support is required (Safari, 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.

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.

window.onload = function() {
    var img = document.getElement( 'theimage' );

    if ( img && img.complete ) {
        mn.filtr.applyImageFilter( img, 'blurmotion', {
            distance: 10,
            angle:    90
        } );
    }
};

HTML

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.

<img src="/img/spongebob.jpg" class="filtr filtr-scatter">
<img src="/img/spongebob.jpg" class="filtr filtr-blurmotion[distance=10&angle=90]">
<img src="/img/spongebob.jpg" class="filtr filtr-blurmotion[distance=10&angle=90] filtr-invert">

Please refer to the source code for available options. 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 );