JavaScript: Bitmap Editing


Following on from my discovery of RFC 2397 I realised that we would be able to manipulate the “src” property of the “img” element in JavaScript and thereby change the image being displayed. The Base64 encoding is conveniently handled by JavaScript’s (non-standard but ubiquitous in the browser) btoa function (2008-05-10: ubiquitous apart from Opera, that is). I chose OS/2’s BMP image file format as being suitably simple to manipulate.

The result is BME (BitMap Editor). Note that all the work is done by client-side JavaScript, there’s no server side programming or communication at all (that would be madness!).

Bi-level any-colour-you-like-as-long-as-it’s-grey-and-blue at the moment. I suggest you right-click to save.

This use of RFC 2397 shows up some bugs and misfeatures of the OS X user interface. For example, dragging the image onto opens a new mail message containing the contents of the URL as text rather than an image.

5 Responses to “JavaScript: Bitmap Editing”

  1. glorkspangle Says:


  2. drj11 Says:

    That was my reaction too!

  3. Graham Says:

    Interesting article.
    However, I have absolutely no idea what ROFL means. Please explain obscure abbreviations for the sake of the rest of humanity.

  4. drj11 Says:

    ROFL is Rolling On the Floor Laughing. I think it means glorkspangle found it funny. As did I. Of course the “floor” is ironic. I hope.

  5. @F1LT3R Says:

    No laughing here. That turned out to be a very useful bit of code, Thank you!!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: