Bill Aitken

Bill,

> declare a new image as though I was about to preload it but, instead
> of pointing to a file location, I would like to be able to create the
> image in code.

There are a couple of ways of doing this, but both are subject to
browser limitations.

The first and most obvious approach is to create the image data in a
string (for example the data for a PNG image). Then use
encodeURIComponent on it and prepend the appropriate protocol
information and MIME type to make it a valid data: URI:
"data:image/png,image%20data%20goes%20here"
This can then be used as the .src of an image. However, IE only added
support for it in version 8 (and has a limit of just 32 KB), so if you
need support for earlier versions, it's not viable.

Another approach is to use a JavaScript URL as the SRC, where the return
value from the executed script is the image data:
var imagedata = "image data goes here";
image.src = 'javascript:imagedata';
However, this is not possible in most browsers, as it is a common XSS
attack vector, and is prohibited as a security precaution.

I was wondering if HTML 5 canvas might offer an alternative, but it
doesn't seem it can load image data directly (and it wouldn't work at
all in IE, since it does not support canvas). Looks like the above two
approaches are the only ones. Maybe I missed something, but in all cases
I could find, people were using the data: URI approach.

For what it's worth, canvas will probably provide the overall
functionality you are looking for - rendering an image based on data
created from JavaScript, but it wouldn't be done as a regular "new
Image()", and instead needs the data to be manipulated with the canvas API:
http://www.w3.org/TR/html5/the-canvas-element.html#the-canvas-element

SVG could also allow you to manipulate image vector information using
SVGDOM, and display that (use createElementNS to create SVG elements,
manipulate them with SVGDOM, and append the resulting SVG root element
to the document). However, IE and Konqueror also do not natively support
SVG. Both rely on plugins to provide that functionality, and you are
then at the mercy of whatever plugins the user does or does not have
installed, and can only use SVG images embedded initially in the
document as an <object>.

Data: URIs are currently your best bet, but you will have to drop IE 7
and earlier. For future use, canvas is probably the answer.


Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/