JS to BMP

This requires at least Google Chrome v10

Given a rectangular grid of 0s and 1s:

Hit go to parse this into a BMP file:

Which will be spat out as a Data URI:

And a downloadable BMP image:

So what's going on?

View the source, dammit! Implementations of all the BMP file format components have been implemented in OO-like Javascript:

• BITMAPFILEHEADER
• BITMAPINFOHEADER (but not the DIB headers which allow 16-bit and 32-bit colour)
• RGBQUAD colour palettes
• RGBAX-defined colour factories
• Pixel array of image data, correctly padded

Through the interface above, you can quickly define a monochrome bitmap image. Since there's no particularly fun way of entering 24-bit colour data in some kind of messed-up ASCII art, you'll have to open up the console in Google Chrome 10 at a minimum and play around there. An example:

var bmp = new BmpFile(10, 10, 24);
row = [];
var cf = RGBAXColourFactories.TwentyFourBitColourFactory;
cf.c = cf.createColour;
row.push(cf.c(0x00, 0xff, 0xff));
row.push(cf.c(0xff, 0x00, 0xff));
row.push(cf.c(0xff, 0x00, 0xff));
row.push(cf.c(0xff, 0x00, 0xff));
row.push(cf.c(0xff, 0xaa, 0xaa));
row.push(cf.c(0xff, 0xaa, 0xaa));
row.push(cf.c(0xff, 0xff, 0xaa));
row.push(cf.c(0xbb, 0xee, 0x11));
row.push(cf.c(0xff, 0xff, 0x11));
row.push(cf.c(0xff, 0x11, 0xff));
bmp.imageData[0] = row;
bmp.imageData[1] = row;
bmp.imageData[2] = row;
bmp.imageData[3] = row;
bmp.imageData[4] = row;
bmp.imageData[5] = row;
bmp.imageData[6] = row;
bmp.imageData[7] = row;
bmp.imageData[8] = row;
bmp.imageData[9] = row;

var bytes = bmp.bytes;
var oa = document.getElementById('outputarea');
oa.value = "data:image/bmp,"
for (var i = 0; i < bytes.byteLength; i++) {
	var byte = bytes.getUint8(i).toString(16);
	oa.value += "%" + (byte.length == 1 ? "0" : "") + byte;
}
document.getElementById('outputimage').src = oa.value;
		

This was an excercise in learning about the following new JavaScript technologies:

• Data URI Schema
• Typed Arrays
• defineProperty
• File Reader API (coming soon, though it may be easier to just draw it to a canvas then read off)
• File Writer API (I was unable to write a Data URI from a Blob. Hmph.)

Oh, I should probably mention... this has only been tested in Chrome Canary Build v10.0.634.0 - YMMV.

- Steven Thurlow