Reading EXIF data with Javascript

May 11, 2008 – 8:49 AM

Inspired by a comment on Ajaxian, I killed another afternoon or two making a small library capable of reading EXIF data from JPEG images, figuring I would at least learn a bit about EXIF and the JPEG (and TIFF) image formats.

Before we start, a small disclaimer. I’m somewhat of a dork when it comes to cameras and photography and my digital camera always laughs at me after I take a picture. So I won’t go into details about the actual data, since I don’t even know what half of these EXIF tags mean.

So, there are two parts to the problem. First step is to get access to the raw binary data of the JPEG. Now, while it’s easy to get to the pixel data using canvas, we don’t get any of the data around the actual image, and that’s where the interesting parts are hidden. A while back when I first started nerding around with the idea of reading data from images (for the PNG compression and other things), I also toyed with the idea of just reading binary files raw and found that other people had already done good work on this.

As it turns out, we can easily get access to binary data using simple Ajax techniques and we just need to do a few methods for reading bytes, integers and string at given offsets. Binary data is readily available through the responseText property in both Firefox and Safari, it seems, but both IE and Opera pretty much destroy the data. Luckily, IE provides another property on its XHR object, “responseBody” which holds the binary data, but unfortunately our access to this data is also rather limited in Javascript. A quick fix is given to us by VBScript. I shame myself and make a simple VBS function to call from our getByteAt function when using IE and now we’ve got binary access covered in all but Opera. If anyone knows of a way to access the data in Opera, please leave a comment.

Second step involves a lot of reading. If you’re interested, read the EXIF and TIFF specs yourself. EXIF data is basically a small TIFF file embedded within the JPEG file. Anyway, the rest is simply seeking out the relevant data portions and reading them into a Javascript structure (see exif.js).

And the result..

A custom attribute on an image element will now load the EXIF data when the page has loaded and make it available for scripting as follows

<img src="DSCN0614.JPG" exif="true" id="MyPrettyImage" />

var oImg = document.getElementById("MyPrettyImage");

alert("I was taken by a " + EXIF.getTag(oImg, "Make") + " " + EXIF.getTag(oImg, "Model"));

// or use the EXIF.pretty() function to put all tags in one string, one tag per line.

alert(EXIF.pretty(oImg.exifdata));

I’ve tried it on a few pictures of my own and some found on the internet and it seems to work just fine, but it needs a few checks here and there, so it might go wonky if it encounters something unexpected.
One limitation before the end. Since we’re using XHR, you can only access the data from images on your own domain.

Check out the test page here.

Source: Nihilogic