metadata.js

metadata.js is a JavaScript library for parsing & copying JPEG metadata from ArrayBuffers.

Why?

While I'm a huge fan of being able to resize images in the browser via the canvas, I hate the fact that it strips information such as EXIF, IPTC, XMP, Camera Makernotes, ICC profiles and JPEG comments. I couldn't find anything to solve this problem, so I made this my weekend project. It works in all modern browsers, but it will require checks to see if the browser supports ArrayBuffer, Uint8Array, and Blobs. This API is production ready and has been tested with millions of JPEGs.

Requirements

metadata.js requires jDataView for reading binary files. Please pull the latest from their repository.

API

• parse(sourceArrayBuffer)
• copy(sourceArrayBuffer, destArrayBuffer)
• copy(sourceArrayBuffer, destArrayBuffer, sourceMetadata)
• getExif(sourceArrayBuffer)
• getExif(sourceArrayBuffer, sourceMetadata)

EXIF

Basic EXIF support has been added. If you want full exif support, check out Jacob Seidelin's EXIF parser. The following properties are available:

• Model
• Maker
• Artist
• Copyright
• Orientation
• Latitude
• Longitude

Example

Copy JPEG metadata

//copy the metadata from the source image to the destination image
var blob = metadata.copy(sourceArrayBuffer, destArrayBuffer);

Parse & Copy JPEG metadata

//parse the metadata first
var sourceMetadata = metadata.copy(sourceArrayBuffer);

//copy the metadata from the source image to the destination image
var blob = metadata.copy(sourceArrayBuffer, destArrayBuffer, sourceMetadata);

Parse EXIF

//parse the EXIF data
var exif = metadata.getExif(sourceArrayBuffer);

//display the lat/long on google maps
if (exif.hasGPSLocation) {
  var mapOptions = {
    center: new google.maps.LatLng(exif.latitude, exif.longitude),
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map($('#map')[0], mapOptions);
}

Resources

• JPEG marker reader - Really helpful when you need to visualize all the markers in a JPEG.
• JPEGSnoop - Visualize all the markers in a JPEG. (Windows)
• JPEGDump - Command line tool for visualizing markers. (Windows)
• Hexfiend - Awesome open source HEX editor (OSX)
• code.flickr - Good ariticle about how they handle EXIF data. Also some useful information about JPEG markers.
• Mozilla Developer Network - nuff said.