This is killer. Awesome work, Jacob!

Absolute class! Very impressive, going to have to give it a spin this week. Cheers, Justin

Thanks. Please report back if there are any problems!

Great work!

But it doesn't work in Konqueror 3.5.9.

First off, this is amazing! Nice work! Thank you for sharing this tremendously useful bit of code!

A question, though: Is there a way to implement this such that it will read the EXIF data from a photo as the page loads and give you access to that data to print it to the page as the page is rendered? (example: A page with a single photo displayed and the EXIF data in a little text table below it.)

I've tried pre-loading the image and using the onLoad handler, but all the EXIF data returns "undefined". On the same page (same image), the onClick handler copied from your example works fine, though.

Any thoughts? Am I doing something wrong, or is this a limitation of the object model?

Thanks again for this amazing new toy! :)

The problem is that the data is loaded asynchronously after the page has finished loading, so the data is only ready some short amount of time after page load.

Maybe I can add an option to have a custom function called for each image as the data gets loaded and you can then have that function do whatever you need with the data (ie. print it to the page).

And currently it only reads data from images defined in the markup, but I'll add a function for getting the data from dynamically created images, also with an optional callback function to let you know when the data is ready.

I'll see what I can do.

Thanks for the feedback, glad you find it useful!

Is there a way to get GPS info to?

Yea sure, that was just me being lazy. I'll put GPS on the todo list.

Can I get exif data on commandline of WindowsXP?
If can, how to write command?

Is there anyway to get this to work for an image that I don't want to actually display? Basically I have an application where I'm given the name of an image and I want to extract the date/time stamp, upload that information into a database using ajax and then upload the file to the server. I've tried accessing the relevant methods directly, but obviously the exif='true' in the img tag is doing something I don't understand.

@Paul Chapin: Have you tried doing something similar to the example on this page?

It should let you load EXIF info from any Image object, also those not added to the page.

And make sure you set the onload event before setting the src!

Also, are you trying to access the info before the image has been uploaded (ie. it's still on the users desktop)? If so, you'll probably run into security restrictions.

This is great--I'm having a lot of fun with it. That said, I noticed a problem with one field in particular that I was interested in: UserComment. You can see in your third example on this page--UserComment is not being interpreted correctly. I figured out that since the UserComment tag (and other tags) has an undefined data type, any text was getting turned into an array of ASCII codes.

I made a change to readTagValue, and here is the code and the very early, ugly results of my efforts. If you click on the sixth picture, you can see that the UserComment shows up correctly.

@sarah: Thanks. You're right that the data is just returned as an array of byte values. I'll have to check the EXIF specs again to see if I can make the assumption that the UserComment field will always be ASCII text. If so, I'll try handle to handle it better.

And thanks for the investigating and the code!

I noticed that at least one other field had the same issue: GPSProcessingMethod on the third photo. When I converted it to a string, it looked similar to UserComment: "ASCII" followed by three characters and then the rest of the text. So my theory was that I could check for "ASCII" to determine whether a field should be treated as text or not. The fifth photo has some non-text information in UserComment. It doesn't seem to be very *useful* information (an array of zeros), but if you always treat UserComment as a string, you might run into a problem.

Hello,


The easiest greatest exif script I have seen. Not being extremely proficient in coding is there an easy way to pick what exif items you want to show.



Thanks


JIM

Excellent post :-)
this is just what I've been looking for!
going to have loads of fun combining this with javascript & html DOM.
many thanks,
Mark.

Great script and amazing work! Just what I need. :)

I am having trouble finding the latest version, though. The one with the GPS has a 404 for exif.js and the other pages are also a mess with the download links embedded into the text and all going into different directories.

Is there somewhere a definite download place to get the latest version, all rolled into one library?

Thanx!

Wow, the GPS page was rather messed up indeed. Thanks for letting me know, it's fixed now. I'll have to reorganize some of nihilogic.dk to make it easier to find stuff, it's getting a bit messy.

The exif.js links here and elsewhere should all lead to the latest version now:
http://www.nihilogic.dk/labs/exif/exif.js

Wow! I was looking for a way to display photo info on a webpage and this is wonderful!!

I've got everything working under FireFox, but I couldn't get it to work properly with Explorer 7. So I thought I'd come back here to test the demo pages.. same results.. FireFox is good, Explorer 7 is not good.

Any ideas???

thanks
Rob

Whoops. A small bug had found its way into binaryajax.js. Fixed!

That's perfect!!
Thanks for fixing it so quickly.

Rob

I see that any exif fields employing arrays show only the number of values in the array, but don't display the actual data from the keys (here is an example from one of my GPS-coded jpgs:

GPSLongitude:[3 values]

I am particularly interested in GPS data so that photos can be mapped to Google, so I need something that will report Latitude and Longitude as a decimal value (decimal seems to be the usual format for internet-based geo-coding). Is this something you can do?

Whatever you can or can't do, thanks for sharing a very nice program. I am not able to originate any code myself, but I can often integrate what's already available.

david@homelands.ca

Ignore my earlier posting. I found the code snippet you had provided elsewhere on your site: it fully answered my query.

Once again, thank you.
david@homelands.ca

Some of the questions and comments on this page might best be answered by having a look at similar Perl, PHP, Python, ColdFusion, etc scripts that run on a web server. These analyze images while the HTML page is being generated, allowing you to inject the EXIF data into the page before it is served up to the browser.

This script looks very promising for what I need but I'm confused as to how I can put this script on my page.

Would you be able to write a short tutorial on how to put this on a simple page?

Thanks a lot.

n/m figured it out. :)

Ok, cool :) Just let me know if you have any problems.

I do have a quick question though. Is the EXIF info gathered after the image has been downloaded?

I am looking for a script that can instantly get the 'width' property from the EXIF info before the image has been loaded into the browser. I am using this property to control the width of a table on a page and need to know the value of this property before the page is created.

I thought maybe using the EXIF info of an image would be faster then using the DOM Image.width propety.

Also do you have any plans on adding PNG support?

Thanks for your time.

Yes, it doesn't analyze the file until it's done loading, so I don't think there's any advantage of using EXIF over simply checking the image width via the DOM.

Unless you're certain that the image contains EXIF data, it doesn't seem like a very reliable method either.

I also made this little script: http://blog.nihilogic.dk/2008/08/imageinfo-reading-image-metadata-with.html
It works pretty much like the EXIF script but reads data from the image header instead (dimensions, color depth, etc.) and supports both JPEG, PNG, GIF and BMP.

Awesome. I tried out the script you suggested and changed it load only 1004 bytes and it gets the EXIF pretty fast. It might even be faster then using php to check the image dimensions. I'm happy with the speed of your script and would use it on my site but there’s so much extra code I don't need in the 3 javascript files. I like to keep the code on my site efficient and easy to understand so I know what’s going on. Your code is way beyond me lol…

Would it be possible to get a barebones version of your script in one javascript file? I only need the width/height from a jpeg file. I would try to do this myself but theres so much going on in your script and I don’t know enough about javascript.

Thanks.

Hi Jacob,

I was trying your script but it doesn't seem to work local on my computer, and it does work on a webserver. Is there any explanation for this?

Thanks

@derkmdt: That's probably because no HTTP status code is returned when retrieving local files (with the "file:///" protocol). You can try also allowing status code "0" instead of just "200" and "206" in sendRequest() in binaryajax.js. Look for "oHTTP.status".

Hi Jacob,

I'm building a website for my photos and ould use these scripts to display the exif data. I'm getting always an undefined on oData. Any idea what I'm doing wrong?

Thx, Peter

Well, Opera has EXIF information built into the "image properties" window, but that's not much of a help if you want to display the data inside the HTML page.

For some reason I get "undefined" back as the result for a query on the same photo as you are using on the site. Any idea what could be the problem?

JWS

Are you calling the page locally or from a server? If it's online, please provide a link.

Great work Jacob. One question:
If I don't have exif='true' on an image, the browser will load the image from the server using regular http request which is for the entire page.

Now if I set the exif='true' then what happens behind the scene? Looking at your code breifly, it seems you are sending xmlhttp request to get the image information. Will this cause the full image data to be retrieved from the server by your plugin OR you are getting just the exif portion of the image?
If you are getting the whole image then it is getting loaded 2 times per image. NOT?

I haven't looked at you code in full details yet.

Yes, it is possible that the image data will be retrieved twice. There's no way (that I know of) to access the file data from the <img> element which is why the XHR is necessary. If the image is cached by the browser, it shouldn't be a big problem, though.

The amount of data could be limited to just the EXIF data if only I knew beforehand how much data to retrieve. IIRC, I don't even know where in the file the data is located until it's been analyzed.

Hi Jacob,

great job! I have 2 extension ideas that really would increase the usefulness of your javascript exif lib:

1. Include Google Gears support. With Gears, you can select multiple files by a file chooser and then have access to their binary content via the blob Object. Gears also provides means to create thumbnails of these files. So the user could pick arbitrary image files and then see their metadata. It shouldn't be too much extra work, since the blob-Object has a convenient slice-method.

2. Use ExifTool's taglists as datasource for your parser. When you run 'exiftool -listx -EXIF:All > exiftags.xml', it dumps out an xml file containing all EXIF-Tags including names, tagIDs, datatypes and translated values (in up to 7 languages ;-)). You want to convert the xml to json (e.g. with some python script) and include it as an external .js file. If you decide to extend your parser later (e.g. support for Canon Makernotes,...), you can simply obtain the necessary tag data by using 'exiftool -listx -Canon:All > canonmakernote.xml'

Two avoid two downloads per image (one to diplay the image +
one to read exif datas) you can display the image using
its binary data.

var img=document.getElementById("myimg");
img.src="data:image/jpeg;base64," + encode64(xhr.responseText);
img.style.display="";


function encode64(inputStr)
{
var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
var outputStr = "";
var i = 0;

while (i> 2;
var enc2 = ((byte1 & 3) << 4) | (byte2 >> 4);

var enc3, enc4;
if (isNaN(byte2))
{
enc3 = enc4 = 64;
}
else
{
enc3 = ((byte2 & 15) << 2) | (byte3 >> 6);
if (isNaN(byte3))
{
enc4 = 64;
}
else
{
enc4 = byte3 & 63;
}
}

outputStr += b64.charAt(enc1) + b64.charAt(enc2) + b64.charAt(enc3) + b64.charAt(enc4);
}

return outputStr;
}

It should be possible without the base64 step, but I couldn't
get it to work without it. Doesn't seem to work with IE.

phil [at] philten [dot] com

Hello,
I'm working on some pictures containing IPTC data.
Is it possible to read this kind of data also?
Thanks,
Jabar

I have completed a poorly written blog post about the Java port I mentioned if you or any of your readers are interested :o)

http://whelkaholism.blogspot.com/2010/03/j2me-exif-and-lightmetering-part-1.html

Hello,

I'm looking for a script (pref. AutoIT) that edits UserComments in EXIF of jpg-files.

Thanks for any help,

Wolf Bartels privat[at]wolfbartels[dot]de

Hello,

I am hoping that you will get this soon. I am having trouble trying to implement this onto my website. I am merely trying to get it to work.

I keep getting 'undefined' information.
The webpage that I am implementing it on is http://www.onesimustech.com/exif/

If you could get back to me as soon as possible. If I am neglecting to do something please let me know. Thanks, Jiffy

My email is onesimusdkp[at]gmail[dot]com

(This is just for record to make it public. The problem/fix was reported to
Jacob by e-mail separately)

----------- >8 snip ----------
[Problem]
Canon EXIF is not displayed correctly by the exif.js.
The problem appears when picking Model name and other character
data.

[Correction]
In binaryajax.js version 0.1.7,
Line 80
is;
aStr[j] = String.fromCharCode(this.getByteAt(i));
change to:
aStr[j] =
String.fromCharCode(this.getByteAt(i)).replace("\x00","");

[Reason]
Canon EXIF data containg 0x00 in the character data as paddings.

----------- >8 snip ----------

Tak Fujiwara

I dont get any exif data from the pix i have, even though those pix have all the exif stuff.
but when i copy and use the pix in this page:
http://www.nihilogic.dk/labs/exif/
it works,, wat is the problem

Hi!
ive used your great binaryajax and EXIF scripts on my website with succes. However, since i moved it to a new server it doesnt work anymore!
the old server was an apache server, and now its on a microsoft IIS server.
i get no error messages, it just stops working after line 198 in binaryajax.js...
i do get a "400 - bad request" in some debugger plug-ins

When trying to use these script on my pictures I got "undefined" result. After some debugging is appeared that the scripts assume a tiff offset of 8 or else dye. My pictures had different offset, so some adaptation was needed:

In exif.js around line 491

Remove the check for an offset of 8.
Place the actual offset if a variable oOffset
Call readTags with an offset of oOffset instead of 8.

Here under the resulting code:
------------------------------

// if (oFile.getLongAt(iTIFFOffset+4, bBigEnd) != 0x00000008) {
// if (bDebug) console.log("Not valid TIFF data! (First offset not 8)", oFile.getShortAt(iTIFFOffset+4, bBigEnd));
// return false;
// }

var oOffset = oFile.getLongAt(iTIFFOffset+4,bBigEnd);

var oTags = readTags(oFile, iTIFFOffset, iTIFFOffset+oOffset, EXIF.TiffTags, bBigEnd);

It's a pity Adobe lightroom 3 does not copy Exifs sanymore in their exported jpg's.
Time to implement a xmpmeta parser in your library, as an alternative ?

Few questions:

1) Where is the latest code?
2) Does it loads the same image 2 times? (once for showing the image and once to read the EXIF)
If it does loads the image twice, it will be a bad design for a busy site.

3) How to make sure that each photo loads just once. I will know when a photo is done loading at client side.

4) How about the licensing requirement on using this code for commercial purpose?

Great work Jacob. We need innovative people like you.

Cheers.
Projapati

Amazing.

One further question:

I have a variable which contains the base64 image data. What function can I pass that variable to in order to get the data out of it without displaying the image on the page?

Thanks!

I've put together a demo using Justin's exif.js with native binary, and drag + drop support;

http://mudcu.be/labs/EXIF/

Thanks sharing your code ;)

Great point as bodies don’t analysis supplements as abundant as they should at the moment! Best Hosting Service

I know only the basic information of javascript nothing other than that. Now your blog is very much helpful for me to learn. Thanks for sharing. Register domain names

Seems that works on Apache but not on IIS7, probable it's stripping the Exif data?

Just stumbled (via) over an interesting blog entry by fellow Dane Jacob Seidelin describing how you can extract EXIF information with JavaScript giay bup be.

Back in 2004 when I wrote my Auto Captions in Photos article this was something that I dreamt about. And now it seems to be possible. Hmm, I better take a look into those script files for a more detailed examination.

To simplify writing the HTML you might remove all of these script statements:

document.getElementById("img1").onclick = function() {
alert(EXIF.pretty(this));
}

...and then include an onclick directly attached to each image (thereby also removing the need to id each img element):

<img src="myimage.jpg" onclick="alert(EXIF.pretty(this))"/>

Note that because "this" refers to the img element itself all of these will be the same for all img elements, and you can also remove the id attribute from each img as it is not needed anymore.

The onclick could be further simplified by creating a function that includes the alert statement, but I think that is pretty obvious (for anyone going that far) to figure out.

Note that I've also removed the exif="true" attribute from the HTML and (as it is not standard and won't pass HTML validation) and then deleted the check for that attribute from the exif.js (which means that all img elements are parsed). The alternative (if you wish to limit which images are parsed) would be to use a standard attribute like class="exif" and then change the check so that this attribute value is looked for (in exif.js) instead.

Not working on Firefox 12

Nice blog. I like very much. We expect similar this one. Thanks for sharing to all this nice info. work from home

free flash animations

Note that I've also removed the exif="true" attribute from the HTML and (as it is not standard and won't pass HTML validation) and then deleted the check at http://www.mcs-webdesign.de

Hey Jacob
Great great post.
Im searching for the way to read some of image meta data. I cannot do it with php(i would be the best option) since my hosting doesnt support this option. They dont want to enable this module.
So only way i can do it with javascript. My images on same domain.
Your example works fine, but i cannot use it on nether localhost nor on my domain. Im getting or unidentified or empty alert.

Please let me know what can i do to enable this?!
May be there is simplier way. I only need to get Title, Description and date taken from image.

Thank a lot.
Alexei

This is pretty awesome!!!
However I would love to be able to read out the the lens information (Tags 0xa432, 0xa433, 0xa434 - see: http://www.exiv2.org/tags.html) so I tried to just append the ExifTags and TiffTags tables by those values, but that didn't quite work. Any idea, what to do to get those informations, I'm completely new to JS, so I'm a bit lost. Thanks again for the script

Just saw this code is used in the new iCloud Beta from Apple. Good work!

Jacob, this is a fantastic plugin. I do have a major issue however. Nothing i do can get the scrip to read the data in $(document).ready(function(){} event.

Both of these return blank data

$("#myimage").load(function() {
$(this).exifLoad(function() {
alert($(this).exif('Orientation'));
});
});

$("#myimage").ready(function() {
alert('This is image orientation: ' + $(this).exif('Orientation'));
});

I suppose this is tied to ajax. Do you have any idea how I could read this data without having to click on the image?

All help would be greatly appreciated.

Hi,
I´am stuck in a problem of script showing only "undefined" values (pretty function shows empty box) even with image you tried it on. Everything, however, seems actually same as in your examples. I uploaded test page here: http://davidvyvlecka.moxo.cz/justinczech/test.html
I would really appreciate your help. Thanks

Hi,
I'd like to write a plugin for wordpress that uses your code to show some photos on a map. But in order to do this I have to modify part of your code. According to the license you apply it is possible, but I'd like also to release my code under the GPL. Unfortunately the two licenses are incompatible. Can you kindly upgrade your code to the MPL 2.0 (see http://www.mozilla.org/MPL/2.0/Revision-FAQ.html for clarification) or let me to modify it and release it under the MPL2?
Thank you

Is there any reason this wouldn't work read exif data from am ing tag where the source image is being constantly updated every 500ms, I am calling EXIF.getData() after every update of the image source but it always returns false.

Thanks

Great Script, thanks!
FOR IIS (7 and 7.5)
oHTTP.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 1970 00:00:00 GMT");
must be
oHTTP.setRequestHeader("If-Modified-Since", "Sat, 01 Jan 1970 00:00:00 GMT");
otherwise bad request!

I have been a frequent visit of your blog, you are a great blogger. Topic is very effective and I agree your point of view. I read your interaction with the visitors and support on your point. Good luck!

This is amazing!
One thing. it's not working on iphone.(safari, chrome) how can I fix it?

This has been working till recently, but, stopped working on IE11 with latest patch.
It works on Firefox, Opera, Chrome, and IE8 though.
Sounds like binaryajax failed to fetch data.

Strangely, it works on http://www.nihilogic.dk/labs/exif/ only with IE11.

Anybody know the fix?
Versions are 0.1.10 for binaryajax and 0.1.4 for exif.
Tak

Additional Information:
oHTTP.binaryResponse bytes of the range 0x80-0x9F are substituted if fetched by IE11, in Binaryajax. This results in wrong pointer (offset) to pullout Exif data.
example: 80=>AC, 82=>1A, 83=>92, 84=>1E,,,,, 9C=>53, 9E=>7E, 9F=>78
Tak

Never mind,
Problem fixed. I have reverse converted the substituted bytes back to original.
Tak

good Voi phun nuoc

Hello there, You have done an incredible job. I will definitely digg it and personally suggest to my friends. Hon non bo I am sure they’ll be benefited from this web site.

Hello there, You have done an incredible job. I will definitely digg it and personally suggest to my friends. du hoc tai singapore

Energy contributes 17 per cent of their operational costs. By using these energy mointoring devices, these companies have successfully reduced the electricity bill by 3-4 percentage bb cream 3ce

we have also consolidated 120 labs of these labs into just 50 labs. Both these developments have helped cut the electricity budget by few million dollars. Bring bb cream etude house

These could help industry verticals for whom electricity bills constitute a large part of their operational cost. We are working with one of the big Fast Food joints in the United States of America. Energ skinfood

The objective of the project is to provide support to the emerging solar power industry of the country and help it design better models for lasting performances, ultimately making them economically more viable. bb cream skinfood

These could help industry verticals for whom electricity bills the face shop

whom electricity bills constitute a large part of their operational cost thefaceshop

offers users a single 360°, three-dimensional navigation in a multi-floor view, permitting faster and easier navigation to a desired control zone with the ability to see an entire facility or complex in a convenient 3D snapshot. 3 concept eyes

a multi-floor view, permitting faster and easier navigation to a desired control zone with the ability to see an entire facility or complex in a convenient 3ce