Wednesday, May 14, 2008

Comments 18 comments

jQuery EXIF data plugin


I've never really used libraries such as jQuery or Prototype and only really know them by name. So, I decided to take a look at jQuery and found that turning something like the EXIF reader into a jQuery plugin was a matter of adding just a few lines.


Using this, you can now do something like:

<img src="image1.jpg" id="img1" exif="true" />
<img src="image2.jpg" id="img2" exif="true" />
<img src="image3.jpg" id="img3" exif="true" />

and then

$("#img1").click(function() {
alert("Taken with a " + $(this).exif("Make") + " " + $(this).exif("Model") + " on " + $(this).exif("DateTimeOriginal"));
// exif(strTagName) returns a string with value for the tag [strTagName]
});

$("#img2").click(function() {
alert($(this).exifPretty());
// exifPretty() returns a string with all tags and values, one tag per line
});

$("#img3").click(function() {
alert($(this).exifAll());
/* exifAll() returns an object holding all tags and their values
* {
* "Make" : "NIKON",
* "Model" : "D100",
* ...
* }
*/
});

Now, I've still only looked at jQuery for 30 minutes or so (seems very cool, though!), so bear with me as I stumble through this field of foreign frameworks and let me know if it needs anything.

Check out the jQuery EXIF data demo here where you'll also find download links.

This was really spurred on by a comment on the image effects library, so maybe I'll see if I can turn those into plugins as well.

18 comments:

Hi Jacob,

This seems to by the only EXIF plugin for jQuery. Great job on leading! Unfortunatly only img1 and img2 examples work and only in Firefox. Opera and IE are alerting spaces.

I also notice this example only works on a production server. Localhost alerts spaces.

Thx

PS: Version numbers on your JS helps a lot.

-=Dan=-

Hi Dan,
Thanks for the feedback. The third example is supposed to alert "[object Object]" or something like that, does it not do that?

It works fine for me in IE7. Opera doesn't work and won't work until they fix their XHR to allow access to the raw data.

I'll try to update the jQuery plugin next time I touch the EXIF code.

This looks like a great plugin, but for the life of me, I can't get it to work. I copy it to my root directory, but as soon as I even try to load it, I get an error saying "Object Expected, Line 858".

Sure enough, I go to line 858:

jQuery(document).ready(loadAllImages);

and when I try to right click to follow the 'jQuery' code hyperlink, it says that the link does not exist. However, I do have jquery.js in the same directory as your plugin.

Any ideas?

To anyone reading: Bill's problem was resolved (by Bill himself) and turned out to be due to the order of which the JavaScript files were loaded. Be sure to load jQuery before the EXIF files!

First off, thanks so much for your effort on this plug-in. It was a wonderful starting ground for me.

I modified your plug-in to load single images on demand. For example, my gallery has one single image in the middle of the screen. I use JavaScript to change the src attribute to load another image. I have a "Photo Details" link that when clicked will get the Exif data for the image currently sitting in my place holder current image slot.

One serious problem I ran into was that Firefox read all of my Exif Data almost instantly. However, IE would take sometimes 20 to 30 seconds to return the data. I started tracing it down and I found that for certain tags that contained arrays of values, it was choking IE. The biggest offender in my images from my Nikon D60 was the "MakerNote" tag. It had 1248 values.

The section of code, specifically for the "MakerNote" tag, causing the slowdown was the following from the readTagValue function:

case 7: // undefined, 8-bit byte, value depending on field
if (iNumValues == 1) {
return oFile.getByteAt(iEntryOffset + 8, bBigEnd);
} else {
var iValOffset = iNumValues > 4 ? iValueOffset : (iEntryOffset + 8);
var aVals = [];
for (var n=0;n<iNumValues;n++) {
aVals[n] = oFile.getByteAt(iValOffset + n);
}
return aVals;
}
break;

My temporary solution was to add the following check in the "readTags" function to skip certain unneeded tags:

var skippedTags = "Undefined,MakerNote,UserComment";
if (!strTag && bDebug) console.log("Unknown tag: " + oFile.getShortAt(iEntryOffset, bBigEnd));

if (skippedTags.indexOf(strTag) == -1) {
oTags[strTag] = readTagValue(oFile, iEntryOffset, iTIFFStart, iDirStart, bBigEnd);
}

I was wondering if you had any thoughts here? Is there a better way to go about this? Experienced this slowdown in IE before?

Edit: In my last comment I misquoted the amount of values in the MakerNote tag for my images. The actual amount of values is 12648 not 1248. Quite a difference.

@KJHoliday: It's probably due to IE just being much slower at parsing the binary data (there's a bit of separate code for IE). I guess I haven't had any images with that many values in the array fields so that's why I haven't caught it. I'll make a note and see if I can fill the arrays in a more efficient manner but I'm not sure if it can be done. Until then you'll have to make due with your temp solution.

Hi,

Great work on this, it's nice to see images get more integrated with the web, even if the whole thing is a workaround. ;-)

I'm wondering if it would be more robust to consider an event delegation model like this article so that images added with AJAX can also be processed?

For now, is the best bet to add EXIF.getData(this); to the load() method of the newly-added image?

adéu,
Mateu

So does anyone know why this returns a blank string on localhost?? I even have an apache server set up and it will not read the correct values from the pictures.

No idea, it should work just fine on localhost. Got a link to an online example?

This looks like promising plugin but it doesn't work on remote images. Does anyone have any solution for this?

Hi, I hope you're still monitoring this page. I love this idea and would like to use it on my site. Any idea why it's not working on this test page in IE 8 -- but it does work when I click the images on your site. I see only empty strings coming back on my page.

Thanks in advance,
Colin

www.colinmitchell.net/test1/new_page_1.htm

@colin: Your image is really big (2+ MB), have you tried resizing it to something more reasonable?

@Jacob,

I know, I was in a bit of a rush, sorry. Also I wanted to demo a photo straight out of the camera in case my editor (CS3) felt like stripping the exif. I've updated it...still empty strings. I've also noticed that your demo page will return empty strings in this same way, but will work correctly following a page refresh. This is on IE8.

Cheers,
Colin

Ok, I'll investigate. I know there are a few things that need to be handled differently, and I have feeling that's what causing problems.

I'll look into it as soon as I can.

Unfortunately don't work on IE6 ...

Hi Jacob,

I noticed that it only works with files in the same folder as the html page:

WORKS:


FAILS:


Any idea how to fix this?

Thanks,
Jan

janmartin AT diy-streetview DOT org

P.S.:
blogger.com does not like the img tag.

Jacob was so nice to answer my email on how to make the plugin work without clicking the image, just automatically:

$("#imgA").load(function() {
$(this).exifLoad(function() {
// exif data should now be ready...
});
}); // end load

Post a Comment

 
Copyright 2008-2009 Jacob Seidelin - Privacy Policy - Some icons by Bruno Maia, IconTexto