Javascript Image Effects

A collection of different image effects using canvas and IE filters.

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 (except for the latest WebKit nightlies), so only the very basic flipping effects will work on this browser. 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 table further down.

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");

Example usage 2:

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

Original image:

Processed image:

Click effect names below to apply effect to sample image

Effect Parameters Description Compatibility
fliphorizontal Flips the image horizontally
flipvertical Flips the image vertically
invert Inverts the image colors
desaturate Converts the image to grayscale
blur Blurs the image a bit (almost unnoticeable)
blurfast Blurs the image a bit. Should be a bit faster.
blurmore Blurs the image a bit more
sharpen Sharpens the image a bit
sharpenmore Sharpens the image a bit more
edges Edge detection
emboss Emboss
emboss2 Better emboss
laplace Laplace transform
noise Adds noise to the image
lighten Lightens to the image (when parameters are added,
it can darken the image as well)

Comments: go here

(c) 2008 Jacob Seidelin