Add cool effects to your images with PaintbrushJS

PaintbrushJS is a lightweight browser-based image processing library built with Javascript and canvas that can apply various visual filters to images within a web page.

You use it by applying a class to an element on the page and setting a few parameters with some extra HTML attributes. If the element is an img or it has a background-image set in your CSS, PaintbrushJS will create a temporary canvas element and manipulate the image there, before finally saving it back out to the original element.

It supports now these filters: blur, grayscale, mosaic, noise, posterize, sepia and tint.

See the PaintbrushJS demo for an idea of how it works, and you can also see a timed version to see how quick it’ll render a bunch of different filters (listed in milliseconds down at the bottom of the page).

PaintbrushJS doesn’t work in IE. (If you really need IE support now, try Explorer Canvas ).

We used this  image processing on several science stock images and we liked the results.

Leave a Reply