Monday, August 25th, 2008

ImageInfo: reading image metadata (EXIF) with JavaScript

Category: JavaScript

<>p>Jacob Seidelin finishes up his binary meme with a post on reading image metadata with JavaScript via a library that groks EXIF data.

It tries to detect the format of the image file and then reads the header and pulls out information about dimensions and color depth among other things. If the EXIF data library is included, it will also gather any EXIF tags from JPEG files.

javascript
< view plain text >
  1. // URL of the image (must be on the same domain!)
  2. var file = "prettypicture.jpg";
  3.  
  4. // define your own callback function
  5. function mycallback() {
  6.    // either call the ImageInfo.getAllFields([file]) function which returns an object holding all the info
  7.    alert(
  8.        "All info about this file: " + ImageInfo.getAllFields(file).toSource()
  9.    );
  10.  
  11.    // or call ImageInfo.getField([file], [field]) to get a specific field
  12.    alert(
  13.        "Format: " + ImageInfo.getField(file, "format") + ", dimensions : " + ImageInfo.getField(file, "width") + "x" + ImageInfo.getField(file, "height")
  14.    );
  15. }
  16.  
  17. // finally, load the data
  18. ImageInfo.loadInfo(file, mycallback);

ImageInfo, this library, was inspired by the App Engine app IMG2JSON.

Related Content:

Posted by Dion Almaer at 6:47 am
2 Comments

+++--
3.8 rating from 21 votes

2 Comments »

Comments feed TrackBack URI

If you drop in “flXHR” (http://flxhr.flensed.com/) you can do this binary file inspection cross-domain. :)

Comment by shadedecho — August 25, 2008

I thought this was done with a server side trick, but looking at teh code, it’s all javascript.

Very impressive!

Comment by AnM8tR — August 25, 2008

Leave a comment

You must be logged in to post a comment.