{"id":2039,"date":"2010-06-22T17:02:00","date_gmt":"2010-06-22T17:02:00","guid":{"rendered":"http:\/\/jeffreyatw.wordpress.com\/2010\/06\/22\/binary-image-converter\/"},"modified":"2010-06-22T17:02:00","modified_gmt":"2010-06-22T17:02:00","slug":"binary-image-converter","status":"publish","type":"post","link":"https:\/\/jeffreyatw.com\/blog\/2010\/06\/binary-image-converter\/","title":{"rendered":"Binary Image Converter"},"content":{"rendered":"

Binary Image Converter<\/a><\/h3>\n

I made another HTML5 toy! It deals with binary images<\/a> that print ASCII messages when converted, and vice versa. Try it out<\/a>!
\nLast night, I noticed chickensnack<\/a>‘s favicon on his site<\/a> – I converted it to a binary string by hand (by literally typing out the 1’s and 0’s), and then feeding it through a binary-to-ASCII converter I found through Google. I decided that there must be a better way!
\nI wrote this toy to function almost entirely in JavaScript, so everything except form submission and image verification happens in JavaScript. This includes the actual pixel manipulation to read or generate a bitmap, thanks to data URI<\/a> and canvas<\/a>.
\nI learned how ASCII and binary are converted from one another – JavaScript has a handy function to parse a binary digit into an integer (parseInt(x, 2)), but not the other way around. I also learned how to convert images and canvas data into base64-encoded data URIs, meaning that I don’t need to temporarily host an uploaded image on my server – just process it in memory and spit it back out in the response.
\nThis toy (currently) only works with ASCII, meaning you’re out of luck if you try throwing Unicode in there. And also due to the way that browsers display non-printing ASCII characters, you’ll run into problems if you try encoding any old image into ASCII. Perhaps I’ll create a variation that converts the binary into base64 intermediately, so non-ASCII characters can be displayed properly. This would be incompatible with the version I’ve made, though.
\nSome examples for you to try:
\n
\n
\n
\n
\nSource for this can be found here:<\/p>\n