JavaScriptGraphics
Color image is just a 2D array of colors. If you think about image this way you can see that it is possible to draw an image of the size N*M in HTML-only way - as a table with N columns and M rows, where each cell takes one pixel and has a background color assigned to it. Unfortunately even a small image represented like this in HTML results in a large and complex code for the browser. But for artifitial images it is very easy to use RLE compression - if there are several cells in a line of the same color you can replace them by one cell with the correct colspan/rowspan attributes assigned for it.
There are three cool things about this type of images:
-
They can be posted on the pages where images are not allowed (like some forums, or livejournal),
-
The size of HTML sended from the web server to client's computer is not very large - the HTML for the images is generated on the client's computer only,
-
They can be animated to react on user input.
I made a simple JavaScript library that allows you to use simple 2D graphics functions to create such images (like drawing lines, points or circles). Comments and suggestions are welcome.
As an alternative output method a handling of output to a Java applet is also provided in addition to a plain HTML rendering.
This library was tested in Microsoft Internet Explorer 6 and Mozilla 1.3.
-
Analog Clock - shows the difference between different types of HTML rendering
-
Color Sun - shows an example of zooming in HTML output (Java output zooming is working in the same way).
-
Eyes - eyes that follow your mouse pointer.
-
On Top - DHTML output overlay example.
-
Sin/Cos Plot - shows an example of HTML rendering and Java Applet processing (works only in Mozilla or in IE with Java virtual machine from SUN).
Image to HTML converter - this converter contains a preprocessing step, which is made using PHP and GD. Color dithering is produce to reduce the output complexity.
v 0.6
-
Image to HTML image converter added.
v 0.5
-
Polygon and polyline drawing functions are added.
-
DHTML output option and overlay output options + invisible color are added to HTML output processor.
-
New example ("On Top") demonstrating new DHTML output options is added.
v 0.4
-
Java Applet output methods are introduced in addition to HTML output methods.
-
Color values are now accepted in several formats.
-
Rendering time is calculated now.
-
Examples are updated to reflect new features.
-
A lot of bugfixes.
v 0.3
-
Small bugfixes.
-
HTML output processor is moved to the separate class.
-
An optimised method of output compression - Optimised RLE - is introduced. It is using both colspan and rowspan attributes, dividing the table into the minimum number of cells. It is not so fast as the fast simple RLE, but it makes the tables really small. Which method is used for compression (Fast RLE or Optimised RLE) is controlled by the compression parametr of the HTML output class.
v 0.2
-
Functions are rewritten as a class and moved to the separate file.
-
Area fill function is rewritten using stack instead of recursion - this allows large closed areas to be filled-in.
-
Code is cleaned up and documented using Doxygen.
v 0.1
This is JavaScriptGraphics library written in 2003 by Kitya Karlson This software is distributed under LGPL.
After working on this project for a couple of weeks I have found out that a simillar attempt was made before already. The main differnce with my approach and the approach taken by Walter Zorn is that my method performs drawing on offscreen first (on array) and then creates optimised html only when flushed. Also in my method three types of output are supported (HTML table, DHTML and Java Applet) and not only one output method like in Walter's class. So my method would work faster and provide better output for more complex images and is more suitable for animation, however Walter's method works faster if you are in need of just one line.