Main Page | Class Hierarchy | Class List | File List | Class Members | File Members

JavaScriptGraphics

Introduction

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:

  1. They can be posted on the pages where images are not allowed (like some forums, or livejournal),
  2. 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,
  3. 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.

Examples

Converter

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.

Changes

v 0.6

v 0.5

v 0.4

v 0.3

v 0.2

v 0.1

Downloads

Legal

This is JavaScriptGraphics library written in 2003 by Kitya Karlson This software is distributed under LGPL.

Warning

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.
This is a documentation for JSGraphics, a powerfull JavaScript graphics library
© 2003 by Kitya Karlson
Produced using DoxyGen.