Bitmap Image Parser

This example uses the @rlouie/structjs package to create a bitmap image file parser. Using the file information provided here about the file format we declare structs for the header, the info header, and the pixel data. We then use our defined structs to read data out of the array buffer into an object or array of objects with our struct type.

We use our created file header objects to display some info about the file in plain text, and then loop through the pixels and draw them into an ImageData object which is then drawn onto a canvas. Bitmaps store their imagages starting from the bottom, so the image will be drawn upside down. For simplicity of the example, only 24-bit bitmaps are drawn, and we simply have a 500x500 pixel canvas, larger images will be partially cut off.