Skip to content

metadata.js is a JavaScript API for parsing & copying JPEG metadata (EXIF, IPTC, XMP, Makernotes) using ArrayBuffers.

License

Notifications You must be signed in to change notification settings

rfrench/metadata.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

metadata.js is a JavaScript API for parsing & copying JPEG metadata (EXIF, IPTC, XMP, Makernotes) using ArrayBuffers.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published