Links, SoftwareDev , , , , , , , , 35 Comments

Ajax/Javascript: 8 Ways to Create Graphics on the Fly

<a href='http://digg.com/programming/Ajax_Javascript_8_Ways_to_Create_Graphics_on_the_Fly'>Ajax/Javascript: 8 Ways to Create Graphics on the Fly &#8211; digg this</a>

The ability to create rich graphics on the fly is one of the critical gaps in Ajax. There are indeed techniques to do it, albeit far from perfect, and some are do-able today if you take a pragmatic view of things and keep graceful degradation in mind.

Here I list all the techniques I can think of to create graphics and images dynamically when you’re creating an Ajax/DHTML/Javascript web app, with varying degrees of portability and usability. Starting with the obvious and ending with the obscure. Please submit any other techniques you’re aware of!!!

  1. Use SVG. Current versions of Firefox, Opera, and Safari (nightly builds) support SVG natively, but with IE and older versions, users need to install a plugin. SVG is an old W3C standard that creates images based on XML. Being a vector format, it stores the image at a high level (curves, lines, etc), so it scales better than a plain bitmap. Here’s an SVG circle (adapted from W3CSchools:

    < View plain text >
    xml

    1. <svg width="100%" height="100%" version="1.1"
    2. xmlns="http://www.w3.org/2000/svg">
    3. <circle cx="25" cy="25" r="30" stroke="black"
    4. stroke-width="2" fill="green"/>
    5. </svg>

    You could build up the XML string in the code or pull it down from the server with a remote request. However, you don’t actually have to specify the XML as a literal string message; you can create a blank SVG document object model (DOM) and manipulate it to build up an image. In this example, we create a circle of radius 25 (adapted from this tutorial):

    < View plain text >
    javascript

    1. var svgDocument = evt.target.ownerDocument;
    2. var shape = svgDocument.createElementNS(svgns, "circle");
    3. shape.setAttributeNS(null, "cx", 25);
    4. shape.setAttributeNS(null, "cy", 25);
    5. shape.setAttributeNS(null, "r",  20);
    6. shape.setAttributeNS(null, "fill", "green");

  2. Use Canvas. Canvas was introduced in Safari and now in Firefox and Opera too. No sign of life in IE, but this there’s a fantastic adaptor hack (via Ajaxian) that emulates Canvas using IE’s native VML support (more on VML below), and it’s now been rolled into an open-source project, ExplorerCanvas by some Googlers.

    Where SVG is about things, Canvas is about actions. SVG documents represent images. Canvas tags include code to build up an image, a bit like moving a turtle in the Logo language. So you set a colour, draw something, change the fill style, draw something else, etc. You manipulate a Canvas tag like this:

    < View plain text >
    javascript

    1. var canvas = document.getElementById('tutorial');
    2.   if (canvas.getContext){
    3.     var ctx = canvas.getContext('2d');
    4.     ctx.fillRect(25,25,100,100);
    5.     ctx.clearRect(45,45,60,60);
    6.     ctx.strokeRect(50,50,50,50);
    7.   }

    (BTW Canvas uses the dreaded term, “Context”, to refer to what should really be called “paintbrush”, “pen”, or “turtle” … more concrete terms than “Context” which imply some sort of metaphor. But wouldn’t an imperfect metaphor be easier to grok than the generic “Context”? Alas, it’s a common idiom in graphics programming and will be around for a while.)

  3. Load dynamic images from the server. Once you have an image tag (either in the initial HTML or created on the fly with document.createElement(“img”), you can set its source to any URL, even external to your domain (though cross-domain “hot-linking” should generally be done only with permission). This is standard DHTML/Ajax stuff and works with any browser.
    < View plain text >
    javascript

    1. button = document.createElement("img");
    2. button.src = "http://example.com/livechart.gif?interval=15"
    On the server, the image need not be a static image file. It can be a server-side script that happens to output a binary image with the appropriate header, and furthermore, the script can accept CGI parameters, so a unique image can be generated on the fly. Of course, performance will probably suffer if you rely on the server to create images on the fly, and you can only generate them once a second or so. The various Ajax image manipulation tools do something like this.
  4. Use Vector Markup Language (VML). VML is effectively the MS equivalent of SVG, and as such works in IE, and only in IE. As with SVG, you use XML to specify an image.
    < View plain text >
    xml

    1. <v:oval style="position:absolute; left:0; top:0;
    2.               width:100pt; height:50pt"
    3.               fillcolor="red">
    4. </v:oval>
    Fortunately, the Canvas-on-VML hack mentioned earlier means you can take advantage of VML without committing to IE-specific code, though it’s (obviously) not a perfect emulation by any means.
  5. Introduce a Richer Plugin, most likely Flash, to beef up the browser’s multimedia capabilities.
  6. Rely on plain old CSS and the DOM. You can do some impressive-looking things with just CSS and the DOM, e.g. the CSS graphs library. And of course it’s easy enough to make it fully portable too.
  7. Create an image and set its src to a data: resource. Firefox and Opera only. From Dive Into GM:
    < View plain text >
    javascript

    1. var logo = document.createElement('img');
    2. logo.src = 'data:image/gif;base64,R0lGODlhDQAOAJEAANno6wBmZgAAAAAAACH5BAAAAAAA'+    'LAAAAAANAA4AQAIjjI8Iyw3GhACSQecutsFV3nzgNi7SVEbo06lZa66LRib2UQAAOw%3D%3D';
    3. document.body.insertBefore(logo, document.body.firstChild);
  8. Embed an XBM file. Yes, some browsers can display XBM images. Works on IE and Firefox, but not Safari or Opera. Unfortunately, XBM has the rather major constraint that it’s black-and-white. However, it does have the virtue of being a plain-text format which, like the data: protocol, you can assign an image source to.

    If you get your image data in that format in a string (complete with the n after each of the #define lines), then you can make any image’s SRC attribute be:
    “javascript:'”+xbmimagestring+”‘”

    XBM’s not used often, but there are some nice examples: Wolfenstein 5K, most notably, as well as this bitmap editor and a sparklines library.

(Off-topic: I’ve just updated my blog page, I prefer the 2-column sidebar because: (a) there are now 20 monthly archives links; (b) I wanted to add a ton of chicklets; (c) I wanted to add more bio info. BTW If you have a blog, here’s a quick exercise: Place yourself in the mind of a new visitor for twenty seconds, and decide if this person could work out who you are, what you do, and how to contact you. Around 90% of blogs fail this test on the grounds it’s impossible or way too hard.)

35 thoughts on Ajax/Javascript: 8 Ways to Create Graphics on the Fly

  5. seb835 · October 3, 2006 at 1:41 pm ·

    What about the GD library for PHP? You can do some prett amazing things with that, and coupled with Ajax the possibilities are almost limitless. Plus it has the advantage of not requiring any special plugins or capabilities for client browsers, just the GD library/module installed on the PHP serving server.

    Reply
  7. Lachlan McDonald · October 3, 2006 at 2:25 pm ·

    The GD library can produce some great stuff on the fly, and it works quite well. Although it can use a large amount of memory during operations, so a continuous feed from AJAX requesting new data would completely kill the system.

    Keeping in mind that a GD image sized around 1600×1200 can use up too 32MB of memory. Most PHP installations refuse to use more than 32MB of memory operation without some tweaking.

    SVG isn’t completely natively supported in Opera or FireFox. Whilst they both support the basic elements, they have limited support for things such as Outline, Filters and other affects. Some implementations are quite buggy.

    Strangely, with the Adobe SVG plugin, Internet Explorer posses the best SVG support to date. Lets hope SVG increases in popularity and other browsers increase their support for the standard.

    Reply
  8. coolnalu · October 3, 2006 at 4:52 pm ·

    Flash is the most powerful browser graphic platform ever existed. But somehow, there is always a voice in my head telling me not to use flash…can anyone refresh my memory on why flash is not everything we need?

    Reply
  9. Michael Mahemoff · October 3, 2006 at 6:29 pm ·

    coolnalu, the main argument against Flash would be the user base – not everyone has it, some people have older versions, and some companies have policies against running it or upgrading it. From the Richer Plugin pattern…

    A standard plugin platform has the following advantages:

    • The plugin will likely save a lot of development if there’s already a specialised API.
    • The plugin is usually portable across browser versions. If you write a program in Java, for example, it should run the same no matter which browser and operating system it’s used on.
    • The plugin might already be installed on the user’s browser. Often, browsers come with Java and other plugins pre-installed. And if not, there’s a good chance the user’s previously installed them.
    • The user – or their employer – might trust it more than your own system. People generally trust brands like Flash and Java, so they might install those plugins and nothing else.

    However, there are also advantages of writing your own plugin:

    • You’re not locked in to a relationship with the plugin provider. You’re therefore in control of issues such as licensing and management of user data, and not at the mercy of another company’s future plans for the plugin – or lack thereof.
    • You can implement more functionality. Plugin platforms impose their own security model because it’s expected different applications will run on them. So while Flash, for example, lets you extend the browser’s multimedia capabilities, you can’t use it to morph the Firefox toolbar.
    • You can target browser versions not supported by a particular plugin platform.
    • You can control the plugin installation process, as opposed to sending the user over to a third-party site.
    Reply

  10. Pingback: nonsmokingarea.com » Blog Archive » dev: create on-the-fly graphics on websites

  11. GVD · October 3, 2006 at 10:11 pm ·

    Let’s not forget storing an image as a BLOB in mysql and then dynamically sizing or croping it with DHTML at runtime. I wouldn’t want to do this with a large number of images, but it’s still valid, flexible and fairly easy to code into a div or iframe tag.

    Reply
  12. Michael Mahemoff · October 3, 2006 at 11:00 pm ·

    GVD, That’s a good point – using CSS background offsets to choose an image (described in AjaxPatterns “Sprite” demo wrt DHTML Lemmings), that’s really a very different kind of CSS usage from that mentioned above, and constitutes another technique.

    Reply

  18. Pingback: Jeff Barr’s Blog » Links for Monday, November 13, 2006

  19. Pingback: All in a days work…

  20. Pingback: j’Alias » 8 manières de dessiner en JavaScript

  21. rodem · December 12, 2006 at 9:58 am ·

    no more XBM support in IE 7: “Functionality Removed and Changed in Internet Explorer 7 … XBM–Support for XBM, an imaging format designed for X-based systems, was deleted.”

    Reply
  22. Andrew Katz · April 1, 2007 at 12:38 am ·

    I am trying to do something which has not been done as far as I can tell. I have written a computer program which is a complex curved shape generator. A CCSG. I just made that term up as I am writing this.

    I would like to know what technology will do the following: 1. Be generated and held in the browser. No server. 2. Supported by most browsers. 3. Small amount of libraries needed. 4. Does not use up too much computer memory and render in a reasonable amount of time.

    Right now I am going to literally modify the JavaScript Vector Graphics Library by Walter Zorn. Because what I am drawing is essentially an extremely complicated ellipse. http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

    I am wondering if dojo (svg) or canvas would be better, or do they all do things in the same way? For example, Zorn stores hundreds of s to render one ellipse. I am doing my development using Firefox. But I plan to test it on IE and Opera.

    I also noticed that there is no visual tool (other than CodeGear) which one can use to design forms for the Web application (drag and drop controls).

    Reply
  23. sandy · May 2, 2007 at 5:13 pm ·

    Interesting post. I’ve been looking for a way to put in an ad link that corresponds to an image. For example, an image of a theme park will have a dropdown ad that links to purchase tickets or for more information. A close example of this is britepic, although I am looking for open source scripting that will allow me to put in my own ads with my logo in the corner and not a 3rd party ad. Anyone know how to do this??

    Reply
  24. mahemoff · May 7, 2007 at 11:43 am ·

    Hi Andrew, the path you’re following sounds sensible, though there’s not much more I can say than what’s in the above post.

    Sandy, I’m not sure exactly what you’re after, but it sounds like it might require Flash???

    Reply
  25. dgym · May 30, 2007 at 11:05 am ·

    As a small variation on #6, create a table of single pixel divs. The table can be built up in Javascript, storing references to the pixels’ style in a 2D array along the way, then the pixels can be changed by setting the background:

    pixelgrid[0][0].backgroundColor = ‘blue’

    I haven’t seen anyone use this yet. Walter Zorn’s library at http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm could probably be adapted quite easily, and this might be a little quicker for line/curve drawing as the div optimizations can be safely removed.

    Reply

  26. Pingback: Hanno’s Coding Log » Blog Archive » Dynamic Graphics in AJAX applications

  27. Joe Preston · July 27, 2007 at 6:29 pm ·

    Does anyone have any information regarding defining flash graphics from an external xml file. For instance, I want to define, background colors, stroke color, positions, font colors, font type, padding. Basically almost everything that CSS can do, except through XML using Flash?

    Reply

  28. Pingback: Software As She’s Developed » Blog Archive » Announcing Bitjuice: Ajax Bitmap API

  30. Pingback: Ajax/Javascript: 8 Ways to Create Graphics on the Fly » Agile Techno Solutions ., JSC

  32. Pingback: ePva's blog » Dessiner avec du JavaScript

  35. Pingback: Creating SVG graphics using Javascript? | ASK AND ANSWER

Leave a Reply to stelt Cancel reply