ImageGlitcher allows you to glitch any image and save the result. Glitched images look like they are being displayed on a broken analog TV. Check it out here.
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
Latest Tweets
[...] This post was mentioned on Twitter by Felix Turner, Jay Kokernak. Jay Kokernak said: nice work! love the effect > RT @felixturner: New Blog Post and HTML5 demo – Glitch Your Images with ImageGlitcher: http://bit.ly/geHqSi [...]
The following wikipedia article describes the scenario where accessing the pixel data is a security issue (which also why Flash also prevents you from capturing pixel information for movies from other domains):
http://en.wikipedia.org/wiki/Cross-site_request_forgery
The idea is:
1. BankSite has an image on it which renders your account information (we’ll call this PrivateImage).
2. Hacker knows the URL of the PrivateImage (http://bank.com/password.png), but can’t access it because it’s protected by a login/password authentication.
3. Hacker builds a HackerSite which embeds the image (anyone can visit this site, but the browser fails to load PrivateImage because they are not authenticated)
4. HackerSite tricks you into visiting their website with promise of delivering a larger penis
5. Because you are authenticated by a cookie from a previous login, the browser is able to load the PrivateImage into the hacker developed webpage (PrivateImage is downloaded from the bank into your browser, hacker still can’t access your PrivateImage because it’s in your browser)
6. Javascript code on the webpage copies the pixel data out the the image and posts it back to the Hacker server
7. PrivateImage is now in the hands of hackers
While it’s unlikely that your bank account info is rendered as an image, there may be all sorts of private photos which could be accessed this way.
Noel
Wow, that gets some really nice effects.
See also – a couple of different implementations using Flash – http://blog.soulwire.co.uk/laboratory/flash/as3-bitmapdata-glitch-generator
http://blog.madebypi.co.uk/2010/03/10/jpeglitch-test-suite/
hey, love this! so cool. i want to print some, but the images are tiny. anyway to get a high res glitcher, one that wont make a smaller file of the imported image? email me if you can help.
This is genius! Thank you, played for 30 mins with it.
Hey, ImageGlitcher was working the other day, i don’t know if it’s my browser or something, but know, when i post the image URL, i get an error message saying “Image not found”. It was working fine the other day so… i don’t know whats going on.
Anyway, i hope you can reply. ‘Cause i really like this program.
-TheShadowman60
I loved this alot but when I click “save image” it takes me to another tab so I would right click and say “save image as” it won’t save
Glitch Your Images with ImageGlitcher — Airtight Interactive http://t.co/t0Se4KEK
I see the page is no longer there, I was wondering is it going to be put up again any time soon?
Fixed now thanks.
I can’t seem to drag and drop or upload images from either Opera, Firefox, or Chrome. Any solutions?
It keeps saying “Image not found” no matter image link I post. Couldn’t get it to work with any of my own pics unfortunately (using Opera 12 and latest Chrome). Apart from that — amazing stuff. Hope you could fix this sometime soon.
It’d be nice if it actually worked. If I try upload an image from a url, it always says “image not found” even images from google :\
It appears that loading images from an image URL is broken, however you can still glitch images from your desktop via drag and drop. The service I’m using to get image data is down right now, I’ll look into a solution at some point. Glad to know people are still using this thing!
This is amazing! Is there an android version in development?
Is it possible to have a option to remove the scan lines?
It would be preferable that I could drag and drop my images on here – I do use Chrome but when I do drag and drop, it opens my image in a new tab! Please can you fix this soon as I would love to use this.
Is it open source?
it’s not working i even tried reducing the size of the picture , i have been waiting for around 10 minutes and the image doesn’t glitch still says ”glitching…” help? i really like the glitching effect but doesn’t work , using google chrome.
Hey I was just trying to glitch this image http://images.fanpop.com/images/image_uploads/Space-space-584336_1600_1200.jpg without scan lines (looked sweet the one time it worked) but my chrome tab keeps crashing, It worked once but when I tried to save it it crashed. Just tried firefox and it works fine there. Sweet app, mate.
If chrome is crashing, it means the image is too large. I recommend images less than 1024 x 1024.