26 8 / 2010
PaintbrushJS: Client Side Image Filtering For The Masses
Dave Shea, who you might remember as the guy behind the CSS Zen Garden, has written an interesting JavaScript library that makes it easy to apply Photoshop-like image filters on the client side using the magic of the canvas element. Once you’ve included the script on the page, all you need to do to get the effects working is apply some classes and HTML5 data attributes to the images that you want effects applied to. PaintbrushJS automatically takes care of rendering the effects and sending the processed image back into the element. It works on both image elements and background images alike, so no matter how you’ve built your HTML you should be all set to add effects right away. Here is an example showing how to apply a gaussian blur effect to an image:
<img src="image.jpg" class="filter-blur" data-pb-blur-amount="0.5">As you can see, you add effects through class names and set their attributes through HTML5 data attributes. The filters currently available are:
- Gaussian Blur
- Greyscale
- Noise
- Posterize
- Sepia
- Tint
As you can see in the demo, PaintbrushJS is pretty fast, applying filters on all 24 of those images before the page is even finished loading. The most impressive of the filters is the Gaussian Blur implementation, which is generally quite a processor intensive filter, but can be done very quickly and efficiently by PaintbrushJS. Even on slower devices like the iPad, the effects render quickly enough so that the user hardly even notices. Very impressive!
You can check out a PaintbrushJS demo here, the documentation here, and the code on Github. It is exciting to see more and more traditionally static effects come to the browser thanks to the magic of JavaScript!
