Javascript Image Effects
May 2nd, 2008
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.
- Javascript , Web 2.0 , Web Development
- Comments(1)
In I.E when an image is hyperlinked the reflection has a border around it (you know, the hyperlink colors). The image tag itself has a border=”0″ but that doesn’t help with removing the border around the reflection (the image has no border).
Is there a solution for this?