Read meta data from image file with javascript

Question

Is there any way to read the metadata of an image file in an <img> tag using JavaScript?

Answer 1

As answered above, reading the metadata directly from the url is not possible currently (2025). However, you can:

• use javascript to fetch / download the image

• then use an appropriate javascript library to read the metadata.

ExifReader
Using exifreader

npm install exifreader --save

const metadata = await ExifReader.load(file);

Exifr
Use Exifr, versatile JavaScript EXIF reading library

npm install exifr

import exifr from 'exifr'

exifr.parse('./myimage.jpg')
  .then(output => console.log('Camera:', output.Make, output.Model))

UMD in Browser

<img src="./myimage.jpg">
<script src="./node_modules/exifr/dist/lite.umd.js"></script>
<script>
  let img = document.querySelector('img')
  window.exifr.parse(img).then(exif => console.log('Exposure:', exif.ExposureTime))
</script>

Exif.js
You can also use Exif.js to read EXIF meta data from images

npm install exif-js --save

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}`;
    });

GeoTiff.js
Use `geotiff.js` to read (geospatial) metadata and raw array data from .TIFF files

npm install geotiff

import GeoTIFF, { fromUrl, fromUrls, fromArrayBuffer, fromBlob } from 'geotiff';

const tiff = await fromUrl(someUrl);

or

const response = await fetch(someUrl);
const arrayBuffer = await response.arrayBuffer();
const tiff = await fromArrayBuffer(arrayBuffer);

XMP Parser
You can use XMP Parser

npm i xmp-js

import XMP from "xmp-js";

let xmp = new XMP(< ArrayBuffer or dataURI >),
raw = xmp.find(),
parsed = xmp.parse();

So either you fetch the image and pass the array buffer to the library, or pass the image url if the library support pulling the image from the url.

Fetch the Image and then use the library you prefer to get the metadata.

const images = document.getElementsByTagName('img');

// Using a for loop for multiple images
for (let i = 0; i < images.length; i++) {
  //use images[i].src to
  let imageUrl = images[i].src
  // Call the right library using the url or fetch the image
    const image = await fetch(imageUrl)
    const imageBuffer = await image.arrayBuffer();
    //use the library/package to get metadata
}