2007-06-07
JavaScript + Bitmaps = Marvyness
I found a pretty slick JavaScript Bitmap "Painter" today:
protonfish.com/jspaint.shtml
Too bad it doesn't work in Intarweb Exploder.
I also made a JavaScript bitmap editor that works in most modern browsers:
scriptar.com/images/bitmap.htm
My version uses Douglas Crockford's JavaScript Object Notation (JSON) to send a representation of the image as a JavaScript object to a server, and returns them a PNG representation. What's really nice is that there is never a need to use a proxy to serve up the image because JSON requests work across domains (unlike XMLHttpRequest.) Plus, there is no need to parse any JSON returned by the server because it is already JavaScript. My favorite feature is that images (GIF, JPEG, and PNG formats... because they are available to manipulate in the GD graphics library) can be uploaded to the server and it will convert them into JSON and you can continue to edit them at a later date. For example, I uploaded a picture of Nien Nunb and this is its JSON representation:
scriptar.com/cgi-bin/json.pl?id=nn.js
Here you can see/edit the picture:
scriptar.com/images/bitmap.htm?json=nn.js
You can even get an CSS+HTML representation of the image (link at the bottom.) Feel free to take a look at the source code (it's not the cleanest example because I adapted an older version I wrote that even worked in old version 4.x browsers and I haven't made it fully object oriented.) With the CSS+HTML ability (it uses tables... yuck, I know), you could potentially display pictures when a user does not have images enabled in their browser/e-mail client/whatever (please don't abuse!)
Finally, I made a little bit of funky JavaScript art that was fun for me to make.
I guess the reason why I'm writing this is because I thought you might like to see something that is pretty neat. Also I wanted to show that JSON is a good alternative to XML. Enjoy!