The Javascript Image Effects script is stunning. It works by using VML filters in Internet Explorer and the <canvas> tag in Firefox and Opera – the same methods used by Reflection.js.

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.

Among the effects available are blur, sharpen, flip, invert colours, find edges, emboss and brightness/contrast adjustment.

I think it’s fantastic that all of these effects can be achieved using <canvas>. However, it appears that the effects are achieved through the manipulation of individual pixels and unless there are dramatic improvements in performance I don’t think this would be practical as an unobtrusive Javascript. However, it could make a fantastic web-based AJAX image editor which would allow you to tweak an image before submitting it using toDataUrl().

If you use the javascript image effect, be aware of the terms of use which prohibit commercial use without permission.

The javascript video player is pretty cool and fun, even if it is as the author describes it, “semi-useless”! See demo.

So how does it work? A script exports every single frame from an MPEG movie into individual JPEG files. These are then collected together, base64 encoded and exported into a JSON file. The script then creates image objects for each frame and shows them all in succession. There is no support for sound.

First strategy was to create an Image object for each frame and render it on a canvas element using drawImage(). That worked fine and performance was nice (although Opera used a lot of CPU), but I figured I’d try just using a regular image tag and just change the src property to another data:uri each frame. The change was barely noticeably in Firefox and Safari and it ran a bit better in Opera, so I lost the canvas and stuck with plain old images.

Now, it seems that Firefox will eat up all the memory in the world if you keep throwing new data:uris at the same image tag, which led to another change, so for each frame a new Image object was created and saved for later and as the video played, the previous frame Image was replaced by the new Image object. That seemed to work, but introduced an annoying delay as all these Image objects were created before playing, so I ended up moving the Image creation to actual render cycle where it simply checks if the frame Image has already been created, and if not, creates it.

So this is totally impractical but who cares: it’s cool and a fun experiment. I wish I still had time for experiments like these!

A really clever script here which makes use of Javascript and canvas to give dynamic gradient backgrounds.

Here is the problem: when you use the <canvas> tag to manipulate an image or a graphic, it is treated in HTML as an inline object (similar to a super-charged <img>). This means you can’t set a canvas as the background image of a <div> for example.

This script gets around this limitation by using the toDataUrl() function in canvas (supported in Firefox and Opera). toDataUrl() essentially takes the contents of a canvas and turns it into an image, which can then be made into the background of a <div>.

It sounds complicated, check out the JS source if Javascript is your preferred language as opposed to English.

I can see Reflection.js being adapted to work for background images using a similar method, but it’s likely only to work in Firefox and Opera.

If you thought reflection.js was cool, you ain’t seem nothing yet! Christian Effenberger has created three amazing image effect scripts.

Corner.js 

Corner.js can add rounded corners to your images, as well as shading and shadows around the image.

Glossy.js

Glossy.js can add that wonderful glossy and shiny effect to your images.

Instant.js

And my personal favourite. Gives you that instant polaroid look. Configure the tilts, shadows, borders…

I think "wow" summarizes these scripts for me Check out the license though; it’s not the same BSD license reflection.js is licensed under, and you need to obtain a license to use it on commerial websites.

Christian Effenberger created Corner.js which is a really beautiful unobtrusive Javascript to add effects to images in your webpage. It allows you to add corners, shading and drop shadows simply by inserting a small Javascript file into your page and a CSS class.

Christian told me the script was based on Reflection.js. Indeed, the two scripts are very similar: Reflection.js adds a "wet floor" effect typically associated with Web 2.0 whilst Corner.js has some nice image effects which are more "traditional".

If you’ve used Reflection.js you’ll be right at home with Corner.js – you essentially use it in the same way.

Again, many of the benefits of Reflection.js over server-side processing exist with Corner.js: you can use it with off-site images and forum avatars and you can change the parameters of the corner/shadows by changing just a few numbers rather than having to get Photoshop out.

Kudos to Christian for creating a great script which I’m sure will be another great addition to the toolkit of web designers.

Does anybody else know of any similar scripts which adds effects to images unobtrusively, similar to Reflection.js and Corner.js? 

• Christian also created the wonderful S5 Reloaded.