Public API

getData

getData(img: HTMLImageElement | File, callback: () => void): any;

Reads EXIF data from an image element or a File object from a file input. The callback is invoked after parsing; inside the callback, this refers to the image/file and has an exifdata property attached. Must be called after the image has fully loaded.

getTag

getTag(img: any, tag: string): any;

Returns the value of a single named EXIF tag from an image that has already been processed by getData. Pass the tag string name (e.g. "Make", "Model", "Orientation", "GPSLatitude"). Returns undefined if the tag is absent.

getAllTags

getAllTags(img: any): { [tagName: string]: any };

Returns a plain object containing all EXIF tags found in the image after getData has run. Useful for debugging or displaying a full metadata dump.

pretty

pretty(img: any): string;

Returns a human-readable, newline-separated string of all EXIF tags and their values for the image. Convenient for logging or displaying metadata in a <pre> block.

readFromBinaryFile

readFromBinaryFile(file: any): any;

Low-level method that parses EXIF data directly from a binary file buffer. Useful in Node.js when reading image files from disk without a DOM.

Working examples

Scenario - Read make and model from a page image

The image must be fully loaded before getData is called. Use window.onload or the image's own onload handler to guarantee this.

import * as EXIF from 'exif-js';

window.onload = function () {
  const img = document.getElementById('photo') as HTMLImageElement;

  EXIF.getData(img, function (this: HTMLImageElement) {
    const make: string = EXIF.getTag(this, 'Make');
    const model: string = EXIF.getTag(this, 'Model');
    console.log(`Camera: ${make} ${model}`);
  });
};

Scenario - Dump all metadata from a user file input

When a user selects a file, pass the File object directly to getData. No image element is needed.

import * as EXIF from 'exif-js';

const input = document.getElementById('fileInput') as HTMLInputElement;

input.addEventListener('change', () => {
  const file = input.files?.[0];
  if (!file) return;

  EXIF.getData(file as any, function (this: any) {
    const allTags = EXIF.getAllTags(this);
    console.log('All EXIF tags:', JSON.stringify(allTags, null, 2));

    const orientation: number = EXIF.getTag(this, 'Orientation');
    console.log('Orientation:', orientation);
  });
});

Scenario - Pretty-print EXIF data into a pre element

Use EXIF.pretty to get a formatted string suitable for display without manual serialization.

import * as EXIF from 'exif-js';

function displayExif(img: HTMLImageElement, containerId: string): void {
  EXIF.getData(img, function (this: HTMLImageElement) {
    const output = document.getElementById(containerId);
    if (output) {
      output.textContent = EXIF.pretty(this);
    }
  });
}

window.onload = () => {
  const img = document.getElementById('img2') as HTMLImageElement;
  displayExif(img, 'exifOutput');
};

Scenario - Node.js: parse EXIF from a file on disk

In a Node.js context, read the file buffer and pass it to readFromBinaryFile directly.

import * as fs from 'fs';
import * as EXIF from 'exif-js';

const buffer = fs.readFileSync('./photo.jpg');
const arrayBuffer = buffer.buffer.slice(
  buffer.byteOffset,
  buffer.byteOffset + buffer.byteLength
) as ArrayBuffer;

const tags = EXIF.readFromBinaryFile(arrayBuffer);
console.log('Parsed tags:', tags);

File walkthrough

• exif.js - The entire library implementation. Defines EXIF, EXIF.Tags, EXIF.TiffTags, EXIF.GPSTags, and all parsing logic. Entry point for both browser and Node.js. Exports EXIF as the CommonJS module export.
• exif.d.ts - TypeScript interface EXIFStatic describing getData, getTag, getAllTags, pretty, and readFromBinaryFile. Drop alongside exif.js so TypeScript resolves types.
• index.html - Browser-only interactive demo; not needed in production but useful as a reference for event wiring.
• package.json - Declares "main": "exif.js" and package metadata. Used by npm/Node module resolution.
• bower.json - Legacy Bower manifest; ignore in modern projects.
• CHANGELOG.md - Documents breaking changes between versions; consult when upgrading.
• LICENSE.md - MIT license; must be retained in distributions.
• README.md - Upstream usage documentation and tag reference.
• example/ - Sample JPEG images used by the HTML demo. No production relevance.

Common pitfalls and fixes

• Calling getData before image load completes: The call silently fails and exifdata is empty. Fix: always invoke inside window.onload or the image's onload callback, never in DOMContentLoaded.
• jQuery $(document).ready() fires before images load: Do not use it to gate EXIF calls. Fix: use $(window).load() or native window.onload.
• TypeScript this context inside callback is any: The callback uses this (not a parameter) to reference the image. Fix: annotate the function with function(this: HTMLImageElement) to satisfy strict TypeScript.
• XMP data not extracted: getData skips XMP by default. Fix: call EXIF.enableXmp() once before any getData call.
• ESM default import fails: exif-js uses CommonJS module.exports = EXIF. Fix: use import * as EXIF from 'exif-js' or const EXIF = require('exif-js'), not import EXIF from 'exif-js'.
• EXIF standard only covers JPEG and TIFF: PNG, WebP, and other formats return empty data. Fix: validate the file extension or MIME type before calling getData.

Vibe-coding prompt template

I have the exif-js library (v2.3.0) located in the `source/` directory of this
project. I also have a USAGE.md file that documents the full public API and
integration steps.

Please integrate exif-js into my existing project by doing the following:

1. Read `source/exif.js` and `source/exif.d.ts` to understand the real API.
2. Read `USAGE.md` for setup steps, gotchas, and working code examples.
3. Install or wire up the library so it resolves correctly (CommonJS import:
   `import * as EXIF from 'exif-js'` or from the local `source/` path).
4. Add a function that accepts an HTMLImageElement (already loaded) and returns
   a Promise resolving to an object with at least: Make, Model, Orientation,
   DateTimeOriginal, GPSLatitude, GPSLongitude.
5. Add a second function that accepts a File object from a file input and
   returns all available tags as a plain object.
6. Ensure TypeScript types are correct; use the EXIFStatic interface from
   `source/exif.d.ts`.
7. Do not invent any API methods. Only use getData, getTag, getAllTags, pretty,
   and readFromBinaryFile as documented in USAGE.md.
8. Show me where to place the integration files and how to call these functions
   from my existing entry point.

License and credit

exif-js is released under the MIT License (see source/LICENSE.md). Upstream package: exif-js on npm — original repository at github.com/exif-js/exif-js.

This product’s unique contribution is clean room implementation of valuable code block into AVCP compatible standard.

전체 설치 가이드와 연동 프롬프트는 구매 후 열람할 수 있습니다.

Automation, Utilities & Developer Tools

무료