Read meta data from image file with javascript

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
}

No. You would have to download the image (e.g. using XmlHttpRequest) and parse the image yourself.

No, you can't read metadata directly from an <img> tag.

Specific types of metadata

In 2025, directly reading all metadata from an image displayed in <img> tag using just JavaScript of a standard browser is still not possible due to security restrictions. Browsers don't expose the raw file data of <img> element for direct JavaScript access. Nevertheless, there are libraries and workarounds that enable reading specific types of metadata, primarily EXIF data, under certain conditions (for that you can use such JavaScript libs as exifr, exif-js, piexifjs to parse EXIF metadata from image files).

Here is a JavaScript code snippet, assuming you're using exifr library:

fetch('full_path/to/your/image.jpg')
    .then(response => response.arrayBuffer())
    .then(buffer => {
        return exifr.parse(buffer);
    })
    .then(exifData => {
        console.log(exifData);
    })
    .catch(error => console.error('Getting error:', error));

Javascript in the browser cant read EXIF or other metadata directly from an <img> element’s source unless you fetch the image data yourself (because <img> only renders the image pixels, not the metadata, and cross-origin restrictions apply).

usual approach:

1. Get the image as a file (from <input type="file">)
2. Use library like exif-js to read metadata

Back in 2011 the original accepted answer linked to this 2008 script http://web.archive.org/web/20130902115659/http://www.nihilogic.dk/labs/imageinfo/imageinfo.js

Time has moved on and there are many suggestions in other answers that update that approach such as https://github.com/mattiasw/ExifReader but perhaps the best way to test with any Local or remote URL (the server must send correct CORS headers): is try the demo for example https://mattiasw.github.io/ExifReader/global/ with https://lp-cms-production.imgix.net/2020-12/500pxRF_33921433.jpg?auto=format,compress&q=72&w=1440&h=810&fit=crop

The reason is the <img> scrc= may say it is a jpg or any other suitable mime type. However the online storage could be a webp or other data URI that can only be measured once the file stored is accessed.