This demo was built using Peter Nitsch’s BitmapData.js – a very useful JS port of ActionScript’s BitmapData class which makes it easy to manipulate canvas image data. After playing around with it for a while I got some pleasing glitched image results, so I figured it would be useful to wrap it up as a little app. The glitch effect is achieved by:
- Slicing the image horizontally and randomly offsetting the slices
- Randomly selecting a color channel and offsetting again
- Brightening the image
- Adding a ‘scan lines’ overlay.
All the source code is viewable via ‘View Source’. Surprisingly, cross browser development wasn’t too much of a pain once I ignored IE. One of the cool features of HTML5 is native drag and drop support. On Chrome and Firefox you can drag in an image from the desktop.
One issue that came up was that the canvas tag does not allow you to getImageData() on images that are from a different web domain. This is supposedly a security feature to prevent hackers copying images, although I fail to understand why. If a hacker has the URL of an image on your website he already has a local copy of the image – right? Anyway $.getImageData gets around this feature by routing image data through Google App Engine using JSONP.
If I get time there are a few features I want to add in the next version:
- Add ‘Instagram’ style filters
- Add more granular filter options
- Use web workers to avoid hang time
Let me know if you find any issues or if you create any nice images, post a link in the comments.
UPDATED – 9 May 2013
- Removed loading remote images via $.getImageData. Their service appears to be down.
- Added additional controls
- Removed image size limit
- Improved messaging