Javascript decodes inline images
My original goal was to find any way that a JavaScript program could compute graphics and insert the computed graphics into a web page. One possibility was to use
document.open('image/gif'); document.write(image_gif_data);to write gif images into selected documents. It turns out, after much fruitless effort on my part, that while document.open() will open documents with mime type ‘image/gif’ document.write() cannot write the character with value 0, which makes it very difficult to write gif file data.A second possibility was to use data urls in which the value of a small object can be encoded inline as base64 content. Since the data in a tag is limited, in worst case, to 1024 bytes, only fairly small images could be displayed this way.
As luck would have it, I asked for help on the comp.lang.javascript newsgroup, and Martin Webb came up with a third solution to the problem. This uses a javascript url to supply the data for the src= field of an image. The data is neither written nor encoded, it is simply supplied as the result of a javascript expression. Thus we may write a url as:
javascript:'GIF89a\1\0\1\0\200[...]\1\0;'which specifies the 1 pixel square transparent gif as a javascript literal string. Or we might store that data into a global variable:var trans = 'GIF89a\1\0\1\0\200[...]\1\0;'and then write the url as:javascript:transparent
[Update: 6-11-2005]
Here is an example using GifLet:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<LINK REV=MADE HREF="mailto:info@elf.org">
<script type="text/javascript" src="giflet.js"></script>
<script type="text/javascript" src="geometry.js"></script>
<script type="text/javascript" src="colorcube.js"></script>
<script type="text/javascript">
var myTitle, myHeader;
if (window.location.search == ‘?true’) {
use_files = true;
myTitle = "Color Cube Slicer - Use Gifs";
myHeader = "Use Gifs"
} else {
use_files = false;
myTitle = "Color Cube Slicer - Use Giflets";
myHeader = "Use Giflets"
}
document.write("<title>"+myTitle+"</title>\n");
</script>
</head>
<body text="#000" bgcolor="#ffffff" background="../images/el_bg.gif" link="#993333" vlink="#333399" alink="#cc3333">
<center>
<h1>Color Cube Slicer</h1>
<script type="text/javascript">
document.write("<b>"+myHeader+"</b><br>\n");
colorcube();
randomcube();
</script>
|<a href="colophon.html">More info</a>
|<a href="index.html">Use Giflets</a>|<a href="index.html?true">Use Gifs</a>
|
<address><a href="mailto:info@elf.org">Roger E Critchlow Jr</a></address>
<address><a href="http://www.elf.org">elf.org</a></address>
<!– Created: Sun Mar 7 11:20:05 MST 1999 –>
<!– hhmts start –>
Last modified: Fri May 16 19:46:35 MDT 2003
<!– hhmts end –>
</center></body>
</html>
ColorCube works with FireFox 1.0.4
October 29th, 2003 at 12:42 am e
after spending a lot of time to no veil did I find that IE does not support “atob() or btoa()” equivilants.
The alternative is to read an image from the DOM and pass the binary string to a javascript variable.
June 11th, 2005 at 5:55 pm e
Do you have sample code for that? I’m a bit confused…if you’re reading an image from the DOM, how did that image get into the DOM? If it’s an external image, wouldn’t that defeat the purpose of decoding inline images?
June 11th, 2005 at 10:35 pm e
David,
You are right if this were for production. I was experimenting with several options then. I forgot what project I was working on and why, but with regard to the comment I think I was trying to see how a real image object can be Bast64-encoded, so that I could come up with a sample for testing.
– gary
June 11th, 2005 at 10:51 pm e
ok, now I remember what I was trying to do — to solve an archiving problem in blogging.
I had been blogging for a few years by then, and some external pictures had gone off line, leaving urgly broken images on my blog archive pages. But what’s more important was that some of the images had historical significance and it would be a loss if they are gone forever without a trace.
What I thought would be great for blog archiving was to not only save all the HTML code but also embed the images into the same archival page. Simply downloading images to the local server is not practical (tried wget for several months; if you choose the keep the server paths, you end up with a deep an confusing directory tree; if you use flat path, files with same names will overwrite each other; it’s bad either ways).
It seemed to me the best way was to somehow encode the images and store the info in HTML/javascript. That’s why I wanted to read an image from the DOM, get the BASE64 encoding, and embed the string into the page. It’s basically the same idea as MIME/HTML, but uisng Javascript rather than relying on the support of browsers.
Like many other projects, I simply didn’t have time to pursue. So it’s still a unsolved problem.
Copyright might be a problem. However, one could always check to see if the original is gone, ask the user before displaying the “cached” images — if Google can do it, why not us?
Well, technically, it’s not worked out yet. That’s why.
August 9th, 2007 at 3:34 pm e
Hi,
I have been trying to find a way to extract a .gif image from an applet with JavaScript so it could be saved using the browser’s Save Image option from the pop-up menu. And I was hoping this might be the way. However the example you have given doesn’t work on the latest FireFox - unless I am doing something wrong which is quite likely - or IE.
I was hoping you might have worked on this some more since you wrote this or if you could at least point me in the right direction.
Thanks!
August 13th, 2007 at 9:26 am e
Jacquie,
the colorcube example below work for my Firefox 2.x. I have not tried extracting image from Java applets, though.
test: http://www.elf.org/colorcube/index.html?true