Exif.js

A JavaScript library for reading EXIF meta data from image files.

You can use it on images in the browser, either from an image or a file input element. Both EXIF and IPTC metadata are retrieved.
This package can also be used in AMD or CommonJS environments.

Note: The EXIF standard applies only to .jpg and .tiff images. EXIF logic in this package is based on the EXIF standard v2.2 (JEITA CP-3451, included in this repo).

Install

npm install exif-js --save

Or Bower:

bower install exif-js --save

Then add a script tag in your an HTML in the best position referencing your local file.

Note: This repo has no .min.js. Do your own minification) if you want that.

If you prefer another package manager you will probably manage :D. Or you can clone this GIT repository or download it's ZIP file and extract exif.js to your project.

Usage

Start with calling the EXIF.getData function. You pass it an image as a parameter:
- either an image from a
- OR a user selected image in a element on your page.

As a second parameter you specify a callback function. In the callback function you should use this to access the image with the aforementioned metadata you can then use as you want.
That image now has an extra exifdata property which is a Javascript object with the EXIF metadata. You can access it's properties to get data like the image caption, the date a photo was taken or it's orientation.

You can get all tages with EXIF.getTag. Or get a single tag with EXIF.getTag, where you specify the tag as the second parameter.
The tag names to use are listed in EXIF.Tags in exif.js.

Important: Note that you have to wait for the image to be completely loaded, before calling getData or any other function. It will silently fail otherwise.
You can implement this wait, by running your exif-extracting logic on the window.onLoad function. Or on an image's own onLoad function.
For jQuery users please note that you can NOT (reliably) use jQuery's ready event for this. Because it fires before images are loaded.
You could use $(window).load() instead of $(document.ready() (please note that exif-js has NO dependency on jQuery or any other external library).

JavaScript:
`javascript
window.onload=getExif;

function getExif() {
var img1 = document.getElementById("img1");
EXIF.getData(img1, function() {
var make = EXIF.getTag(this, "Make");
var model = EXIF.getTag(this, "Model");
var makeAndModel = document.getElementById("makeAndModel");
makeAndModel.innerHTML = ${make} ${model};
});

var img2 = document.getElementById("img2");
EXIF.getData(img2, function() {
var allMetaData = EXIF.getAllTags(this);
var allMetaDataSpan = document.getElementById("allMetaDataSpan");
allMetaDataSpan.innerHTML = JSON.stringify(allMetaData, null, "\t");
});
}
`

HTML:
`html



Make and model: