RandomHTML Images Without Images (2008)

I call the project HIWI and it's short for 'HTML Images - Without Images'. It's for things (like TiddlyWiki) where everything needs to be held in a single, and/or text-only, format. The ideas present also support in-browser image editing.

Download HIWI which includes this demo page, the javascript code for the TGA parser, and the encompassing image routine itself. The Mona Lisa example image is also included.

You could also just hit 'view source' :)

How does it work?

Very well, thank you!
(Hint: it uses a table of differently coloured background cells!)

Usage:

<SCRIPT language="JavaScript" SRC="hiwi_image_tga.js"></SCRIPT>
<SCRIPT language="JavaScript" SRC="hiwi_image_parser.js"></SCRIPT>

<SCRIPT language="JavaScript" SRC="mona_lisa.js"></SCRIPT>

document.write(decodeImage(imgTGA, 1));

imgTGA is an array containing a byte-for-byte version of a file. '1' is the scale factory. '1' for normal, '2' for double, etc.

This version is a rough example using many hacks and shortcuts. In short:

Hacks in this version:

• No loading from disc (I couldn't get the Tiddlywiki loadFile code to return non-null content)
• Data ripped from limited subset of TGA formats (it's a basic format, 18 byte header, and BGR data)
• Minor corruption at bottom of image.

Issues with this version/idea:

Slow (~5 seconds to decode a 163x218 image)

Limit ctor size on arrays

Future thoughts:

Optimal cell rendering

Alternate image parsers, including those with RLE/compression

Scale images to 64x64 (e.g.)