www.RoBorg.co.uk - Javascript and PHP Projects :: Javascript Image Functions - Rotate and Blur

Javascript Image Functions

Note: These are just a bit of fun - I don't recommend anyone use them anywhere as they are totally useless! Note 2: You can do this kind of thing with CSS filters, but they're an IE thing, not standard.

Javascript doesn't have any functions for manipulating image, so I thought I'd write a couple. The trouble is, js doesn't have any functions, so these are both horrific hacks :)

Blur

Here you see a normal image and a copy blured with javascript. This works by making the image semi-transparent, cloning it several times and ofsetting the clones in a circular pattern. Change these values to play with the blur:      
Try something like amount=400, steps=200 for a cool effect, but only if you have a few GHz!

Original  
Blurry
Original   Blurry

Rotate

If you thought the blur was crazy, you haven't seen anything yet! Click on the images below to make them rotate. Don't try this on a slow computer.
This one works by cloning the image (well, as a background) once for each "section" of the image. For a true, nice rotation, each section should be 1 pixel, but this takes way too much horsepower from the PC, so for the small coloured square it's set to 2x2 and for the other images it's 15, 12 and 7. If you get a kind of jagged line after you rotate, it's a rounding error I can't be bothered to fix :)

Click Me!
Click Me!
 
Click Me!
Click Me!