Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/exif-js/exif-js

JavaScript library for reading EXIF image metadata
https://github.com/exif-js/exif-js

Last synced: 7 days ago
JSON representation

JavaScript library for reading EXIF image metadata

Awesome Lists containing this project

README 

        
# Exif.js



A JavaScript library for reading [EXIF meta data](https://en.wikipedia.org/wiki/Exchangeable_image_file_format) 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](/spec/Exif2-2.pdf)).



## Install

Install `exif-js` through [NPM](https://www.npmjs.com/#getting-started):



    npm install exif-js --save    



Or [Bower](http://bower.io/):



    bower install exif-js --save



Then add a `script` tag in your an HTML in the [best position](http://stackoverflow.com/questions/436411/where-is-the-best-place-to-put-script-tags-in-html-markup) referencing your local file.



```html



```



You can also use a minified version hosted on jsDelivr



```html



```



## Usage

The package adds a global `EXIF` variable (or AMD or CommonJS equivalent).



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: 












```



Note there are also alternate tags, such the `EXIF.TiffTags`. See the source code for the full definition and use.

You can also get back a string with all the EXIF information in the image pretty printed by using `EXIF.pretty`.

Check the included [index.html](/exif-js/exif-js/blob/master/index.html).



**XMP**

Since issue #53 was merged also extracting of XMP data is supported. To not slow down this is optional, and you need to call `EXIF.enableXmp();` before using `EXIF.getData()`.



Please refer to the [source code](exif.js) for more advanced usages such as getting image data from a [File/Blob](https://developer.mozilla.org/en/docs/Web/API/Blob) object (`EXIF.readFromBinaryFile`).



## Contributions

This is an [open source project](LICENSE.md). Please contribute by forking this repo and issueing a pull request. The project has had notable contributions already, like reading ITPC data.



You can also contribute by [filing bugs or new features please issue](/exif-js/issues).

Or improve the documentation. Please update this README when you do a pull request of proposed changes in base functionality.