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.

Demo

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

API

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)
<TABLE ID='myElement' CELLSPACING=0 CELLPADDING=0></TABLE>
...
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.

• 2D arrays of RGB tuples. If there are more than 256 colours, this format is the fastest.

  grid = [[[255, 0, 0], [0, 255, 0], [0, 0, 255]],
          [[127, 127, 127], [127, 127, 127], [127, 127, 127]]];
  palette = null;

• 2D arrays of palette references. This is often the most convenient format, as used in the demo above.

  grid = [[0, 1, 2],
          [3, 3, 3]];
  palette = [[255, 0, 0], [0, 255, 0], [0, 0, 255], [127, 127, 127]];

• 1D array of binary strings with palette references. If there are 256 colours or fewer, this format is the fastest.

  grid = ['\x00\x01\x02',
          '\x03\x03\x03'];
  palette = [[255, 0, 0], [0, 255, 0], [0, 0, 255], [127, 127, 127]];

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.

Download

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

• Image to HTML Converter using tables (like the IE option in this library).
• Inline image tag generator using data URI (like the W3 option in this library).