Dynamically Generate Images with JavaScript

This is a trippy hack from the Netscape 2 days that I just learned about:

"It is also worth noting, as an aside, that just as JavaScript can dynamically generate HTML documents with the write() method, so too can it generate documents with other MIME type data formats. Images are simply another type of data format, and JavaScript in Navigator 3.0 can in fact dynamically generate images. The current version of the write() method does not allow the NUL character (character 0) to be output, however, so only XBM images, which use an ASCII rather than a binary format, can be generated in practice. While the user interface implications of this technique are not clear, it is worth noting that Bill Dortch has implemented a simple drawing editor in JavaScript using this technique. You can try it out at http://www.hidaho.com/doodlepad. Note however that you'll need a fast machine to achieve acceptable response times, since the requisite XBM images are large and thus slow to generate."

I found this through Brendan Eich's weblog, where he discusses the new canvas tag:

"...you can think of as a programmable image tag. In that light, it's reminiscent of the XBM images generated using <img src="javascript:genxbm()"> tricks developed by Bill Dortch back in the Netscape 2 era. All of which is to say, we really should have implemented this kind of tag in 1995, but both the management and hacker cultures then at Netscape deferred to Java for programmable graphics and other such features. What's ironic is that this left most web designers reaching for Flash, not for Java, as the browser and Java-in-the-client wars played out."

Unfortunately the demo doesn't work, which means this hack probably doesn't work anymore in FireFox. However, it does work in Internet Explorer on Windows, and the images are dynamically generated.

Comments