AVM extraction with Javascript

by Stuart Lowe

The Virtual Astronomy Multimedia Project defined the AVM standard to tag astronomical images (jpeg and tiff) with useful meta data. The meta data is embedded in the image file itself a bit like a FITS header. To tag an image you need software such as Photoshop or Adobe Bridge.

This page shows you how to extract AVM tags with Javascript. My code adapts the marvelous Javascript EXIF Reader by Jacob Seidelin so that I can parse the XMP header. It is buggy and may be a bit slow on Internet Explorer. Click on an image and the EXIF/AVM data should be shown if it is there (it may take a little in some browsers as they make another request for the image). As you might expect, the first image doesn't contain any AVM data. The astronomical images are examples from Spitzer that were on the AVM page, one of the recent Chandra press releases and a recent Herschel press release.

Note that due to web browser security policies, this will only be able to work if the image is hosted on the same domain as the Javascript.

AVM tags will be displayed here when you click on an image.

Usage:

To use the AVM Javascript library (~7.2kB) you will need to download it. You will also need binaryajax.js (~6.2kB) from Jacob Seidelin.

Include the Javascript in your page <head> e.g.

<script src="binaryajax.js"></script>
<script src="avm.js"></script>

<script type="text/javascript">
<!--
	avm = new AVM("image1");	// Define the image to find AVM tags for
	avm.load(loaded)		// Load the image and provide the callback function

	// A function that processes the tags once loaded
	function loaded(obj){

		// obj contains the following information:
		// obj.id (string) = The ID provided for the image
		// obj.img (object) = The image object
		// obj.xmp (string) = The raw XMP header
		// obj.avmdata (Boolean) = If AVM tags have been loaded
		// obj.tags (object) = An array containing all the loaded tags e.g. obj.tags['Headline']

		var str = '';
		var i = 0;
		// Loop over all the array keys
		for (var key in obj.tags) {
			// Add the key and value pair to an output string
			str += key+' = '+obj.tags[key]+'<br />';
			i++;
		}
		if(i == 0) str = "No AVM tags were found in the image.";
		// Write the string to the document.
		document.write(str);
	}
// --></script>
	

In your page <body> you should include the image with same ID as you call in the Javascript e.g. image1 in this case:

<img src="antennae.jpg" id="image1" />
	

The example above plots all available AVM tags but you can select specific tags as you prefer e.g. obj.tags['Spatial.Equinox']. Here are the possible AVM keys:

Now that I can extract the AVM tags with Javascript, I am playing with the idea of using CSS3 transforms to rotate and scale images.