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.