Cabinvis

Cabinvis is a small web application that allows you to render the contents of files as images. You can use this to interpret raw image data, or to simply make a 'birds-eye' observation of patterns in the contents of a file.

Inspired by Aldo Cortesi's blog post Visualizing binaries with space-filling curves, I decided to create a utility that would allow me to do this, on the convenient platform that is the web.

It uses canvas for the image output, web workers for processing, the FileReader interface to access files, and the BlobBuilder interface to include the worker script inside the same file as everything else. It is currently tested and supported in Firefox and Chrome. If you want to use it on Chrome locally, you must disable the same-origin policy with --disable-web-security.

The bulk of the code is divided between 'consumers' and 'producers', which are objects with their own internal state. When rendering the image, the chosen consumer reads bytes in, and when a pixel is ready, sends it to the chosen producer, which draws the pixel onto the canvas in some specified arrangement.

Here are some examples: objdump.exe, cmd.exe, colorui.dll.

This program is released under the terms of the MIT license. Please send any questions, suggestions or comments to delan@azabani.com.

Select a file on your computer to render. No data is uploaded to any external server; everything is done client-side.

Image width:
Image height:
Skip input bytes:
Start at a certain offset in the input file.
Default alpha:
Configure a global opacity value for consumers that do not care about opacity.
Zoom:
From 12.5% to 800% inclusive, doubling in each step. If you see a text box instead of a slider above, enter a power of two, e.g. -3 for 12.5%.

The consumer you use defines how the bytes from the input file are interpreted. For example, RGBX reads four bytes at a time, uses the first three to create an RGB pixel, and discards the fourth. 'Byte class' maps each byte to a pixel of one of four colours.

The producer arranges the incoming pixels from the consumer in a certain layout. The Hilbert curve producer is interesting in that it maximises locality; pixels that are close to each other in the file are close to each other on the image.