npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@firestitch/exif-js

v2.3.0

Published

JavaScript library for reading EXIF image metadata

Downloads

170

Readme

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

Install exif-js through NPM:

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.

<script src="vendors/exif-js/exif-js"></script>

You can also use a minified version hosted on jsDelivr

<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>

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 <img src="image.jpg">
  • OR a user selected image in a <input type="file"> 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:

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:

<img src="image1.jpg" id="img1" />
<pre>Make and model: <span id="makeAndModel"></span></pre>
<br/>
<img src="image2.jpg" id="img2" />
<pre id="allMetaDataSpan"></pre>
<br/>

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.

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 ..getDatat().

Please refer to the source code for more advanced usages such as getting image data from a File/Blob object (EXIF.readFromBinaryFile).

Contributions

This is an open source project. 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. Or improve the documentation. Please update this README when you do a pull request of proposed changes in base functionality.