Pixastic Image Processing Library

What

Pixastic is an experimental library which allows you to perform a variety of operations on images using just a bit of JavaScript. The effects supported out of the box include desaturation/greyscale, invert, flipping, brightness/contrast adjustment, hue/saturation, emboss, blur, and many more. For the full list, see the documentation page.

If you have any comments, bug reports or other feedback, don't hesitate to leave a comment here or shoot me an email.

You can follow the development of Pixastic as well as other JavaScript experiments on my blog.

How

Pixastic works by utilizing the HTML5 Canvas element which provides access to raw pixel data, thereby opening up for more advanced image effects. This is where the "experimental" part comes into play. Canvas is only supported by some browsers and unfortunately Internet Explorer is not one of them. It is however well supported in both Firefox and Opera and support for Safari only just arrived with the recent Safari 4 (beta) release. Chrome currently works in the dev channel. A few of the effects have been simulated in IE using the age old proprietary filters. While these filters are much faster than their Canvas friends, they are few and limited. Hopefully we will one day have real Canvas on IE as well.

Show me!

If you want to see for yourself what Pixastic can do, you can check out the documentation where you will find small demos for all actions

No, show me now!

If that's not good enough, here's a quick and dirty demo of how to use Pixastic.

Example code:

<script type="text/javascript">
	function desaturate(img) {
		var img2 = Pixastic.process(img, "desaturate");
		img2.onmouseout = function() {
			Pixastic.revert(this);
		}
	}
</script>
<img src="Flower.jpg" onmouseover="desaturate(this);"/>

Output (mouseover the image):

Where

You can download the Pixastic library from a separate page where you have several options for downloading the file(s).

Who

Pixastic is developed by Jacob Seidelin who also maintains the Nihilogic blog where you can find more JavaScript experiments.