UPDATE: This project has since evolved into the Pixastic image processing library.

Click the effect names in the table to apply effects to the sample image.



This library tries to enable different client side image effects. IE has long had its filters, which have provided a few basic effects for IE. With canvas, some of these effects can also be achieved in Firefox and Opera.

Safari lacks the getImageData/putImageData methods on the canvas 2d-context, so only the very basic flipping effects will work on this browser. The functions are present in the latest WebKit nightlies, however. Likewise, Opera only supports the get/putImageData methods in the beta version (9.50b), so you need the beta to see most of the effects. Check the compatibility column in the table above.

In IE, the effects are really fast due to them being done by the native filters. Opera's performance is decent, but Firefox is pretty slow for the pixel-manipulating effects (like blur, emboss, etc.).

Seeing as the support for these effects is (still) rather sparse and the performance isn't excellent, I'm not sure of the usefulness of this experiment (yet). But it was still interesting to do in a "I guess javascript isn't really meant for this, but I don't care" kinda way.

Include the base imagefx.js script and any effect scripts you need (view source of this page to see them all). The effects can be applied either via javascript or by way of a custom attribute, as seen below. For now, only one effect can be applied to an image. Trying to add more will probably cause trouble.
Example usage 1:

	<img src="image.jpg" id="myimage" />

	<script type="text/javascript" >
		jsImageFX.doImage(document.getElementById("myimage"), "blur");
	</script>

Example usage 2:

	<img src="image.jpg" imagefx="blur" />

Todo:

• Allow multiple effects to be applied to images.
• The contrast filter isn't very good for negative adjustments
• No testing has been done on real life pages yet.

Comments: go here

Thanks to Giuseppe at extrowebsite.com, there is also an Italian translation of the information found here.