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.
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.