JavaScript BMP Library

This library allows one to create BMP images from JavaScript. You provide a two dimentional array of pixel values, it produces the image.


The following fractal image is being computed and generated by the browser on the fly. There is no server-side support.


The library has one callable function:
bmp_lib.render(element, grid[, palette])
This function will render the bitmap onto the specified element. The element can be a table or an image. Images render much faster so should always be used unless the browser is IE. The element may be passed by value or referenced using its ID.
<IMG ID='myElement'> (or)
bmp_lib.render('myElement', grid, palette);

Bitmaps are specified by a grid of pixels and an optional palette. For ease of use, there are three different ways one can encode the bitmap information. Each of the examples below encode the same 3x2 bitmap, with red, green and blue pixels on the top row, and three grey pixels on the bottom row.

Whether in the grid or in the palette, colours are always defined as three-element tuples for red, green and blue, ranging from 0 to 255.


bmp_lib.js (13 kb)

A test harness is available which unit tests the algorithms and generates four images for visual comparison.

A speed test compares BMP images vs tables vs canvas vs SVG.

Let me know if you find this library useful.

Related Links

Last modified: 6 August 2008