Extracting jpeg EXIF information using jQuery

views:

150

answers:

+1 Q:

Extracting jpeg EXIF information using jQuery

I'm trying to extract EXIF information from images using jQuery.

I've tried using a script I found here but I can't get it to read exif data from externally hosted image files. I've posted a simple example page here. The code is tiny so you can just view-source to see what I tried.

Does anyone know either what I'm doing wrong or if there there is another way to do it?

-Matt

+6 A:

The plugin works off requesting the image again via a binary XmlHttpRequest, something you just can't do on a remote domain due to the same-origin policy...the browser does a pretty good job of (by default) separating which domains interact with others, this is one of those cases (for security reasons).

Sorry the answer sucks, but I don't think you're not going to be able to do this on a remote image, on a domain you don't control.

Nick Craver 2010-08-20 11:39:37

Thanks, I thought this might be the case.

mattburns 2010-08-20 12:00:04

The easiest way to handle this is to make an image fetching server script. You change img src to "/getimage?url" and it just returns it. Pretty easy to write no matter what your web framework.

Lou Franco 2010-08-20 12:02:56

I wouldn't agree with Lou...it could be easily used by spammers and be a possible vulnerability. The best way would be if you get the data in-line (ie, in the same page), or at least, your script would accept the index of the image to load from a predefined list.If the image list is variable, make sure you have some form of filtering, ie, per-domain filtering.

Christian Sciberras 2010-08-20 12:06:00

I always wondered how people seem to think anything could be done with javascript. Given a remote image, isn't it obvious you could(should) download the image on the server and do the special processing there?

Also, what makes you think jQuery can do things javascript doesn't? What you are looking for is, at it's best, something that needs to be supported in plain javascript.

Really, parsing a remote binary file locally? Sure it's a nice hack, but why not settle for the real/pro solution, make the server parse the image?

Rant aside, the JS lib cannot work on remote files, and this can't be ever done with plain JS.

You should be downloading the file on your server and parsing it from there.

Christian Sciberras 2010-08-20 11:44:01

This isn't a constructive answer, it's just a rant when you don't know what I'm trying to achieve. I didn't know javascript couldn't do it, and thinking it was possible, I would have preferred a solution in jQuery. I _need_ the image to be processed client side. I was just hoping it could be done in javascript rather than having to use java web start or something similar.

mattburns 2010-08-20 12:06:03

PHP, ASP, Ruby, Node.JS (javascript)... all of them can do it.They just need a server.With all respect, I think you should forget jQuery and see what JS is really about...

Christian Sciberras 2010-08-20 13:02:15

The rant is not helpful. It is obvious, yes, that the remote file has to be downloaded by the server (because of the cross-domain issue, though there **are** hacks for that). But whether to process it there or on the client is a reasonable choice for an experienced developer. Also, what makes server-side processing more "pro" than client-side. I'm constantly looking for ways to reduce server load, and shifting processing to the client almost always does just that. I personally expect to see much more byte-array processing in the future as a pain-free way to get at metadata, such as EXIF.

Andrew 2010-08-22 06:42:46

Andrew, normally you always expect the client side to be highly fallible; you know that a server-side EXIF lib works, but how do you know that at some point someone (browser) decides to disable getting a JPG file through AJAX? While at it, what makes you think shifting from PHP to JS is a more reasonable choice? (hint; due to the nature of JS it will *always* be several counts slower).Finally, regarding the choice of a developer, it depends, not on the experience, but what the developer is trying to achieve. Similarly, there are developers that code images using <div>s....

Christian Sciberras 2010-08-22 10:34:49

Oh and for the matter, the hacks you mentioned above are nothing than having a server parsing the file itself.Rather than a hack, it's another layer of abstraction.Again, if you didn't knew JS didn't have file parsing capabilities, why are you looking for said functionality in jQuery?The method they're using to do what you want actually *is* the hack.

Christian Sciberras 2010-08-22 10:36:59

You'll either have to proxy the images on the same hostname or get the external host to send appropriate access control headers to allow you to request data on their site through JavaScript.

Eli Grey 2010-08-22 06:05:58

ansaurus

tags:

views:

answers:

Extracting jpeg EXIF information using jQuery

related questions