glif: generate client-side gif files from javascript

It probably won't be the biggest thing since AJAX, but I hit upon the idea of generating images client-side. The current ways to do this seem to involve using tables or absolute-positioning of very small DIVs. (See, for example, http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm) My technique, which I call glif (for GIF and glyph), generates a gif-format image on the client side.

One application for this that comes immediately to mind is client-side generation of sparklines-type images, possibly from an AJAX source.

To make an image WxH pixels big, first create a properly sized array: var pixels = new Array(W*H);. Then, for each pixel X,Y that should be opaque, store a 1 at the proper location: pixels[X+Y*W] = 1;. Finally, create the image: var my_glif = make_glif(W, H, pixels [,red, green, blue]);. If they are specified, red, green and blue should be byte values from 0 to 255. If they are not specified, the foreground of the image will be black. "0" pixels are transparent.

Now, you can specify this image as the SRC attribute of an IMG tag: document.write("<IMG SRC=\"" + my_glif + "\">");

glif.js is the javascript source, glif.html is a small demo which draws a sine wave in an image, and sparglif.html and sparglif2.html are sparkline-type demos.

As a practical matter, my Firefox complains about how long the javascript runs at above 64x64 pixels. Limits on the size of URLs will also start to hit somewhere around here. Also, the GIF files I generate appear to be damaged in some way, because GIMP and MSIE refuse to load them. On the other hand, Firefox and the 'xv' image viewer for Unix both load them without complaint. I haven't tested in other browsers.

The generated images are monochrome, with one foreground color and one transparent color. The created GIF file is bloated, because it's created using libungif-style noncompression. (mostly for easier coding, since the patent on LZW encoding has expired)

This implementation is licensed under LGPL.

Files currently attached to this page:

glif.html	1.1kB
glif.js	3.0kB
sparglif.html	1013 bytes
sparglif2.html	2.3kB

glif: generate client-side gif files from javascript

Tags: