Issues with EXIF Library in HTML

Question

I have the code below, and no matter what I try I literally cannot get the exif data to show up I have no clue what is going on. This code is taken straight from the github of the exif-js library: https://github.com/exif-js/exif-js

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

<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
<img src="https://2.img-dpreview.com/files/p/TS1200x900~sample_galleries/0861943200/2984823081.jpg" id="img1" style="max-width: 200px;" />
<pre>Make and model: <span id="makeAndModel"></span></pre>
<br/>
<pre id="allMetaDataSpan"></pre>
<br/>

When I open my HTML file in chrome (not been published yet so opening directly from my computer) it just shows this:

I tried every single solution available on the internet but code that works for others won't work for me (ex. https://awik.io/extract-gps-location-exif-data-photos-using-javascript/)

Kindly, edit your question and add code instead of images! Also, add error from console (if any). — OMi Shah, Sep 02 '23 at 03:10
Welcome to SO. What debugging have you tried? Eg there is an obvious answer but you didn't say if you've checked that - are you sure your jpg has Exif data? Or maybe it just doesn't have those fields - have you tried to retrieve all Exif data, as shown in the docs? Does the example page included in the lib work? Are there any errors on your devtools console? — Don't Panic, Sep 02 '23 at 04:20
check the code is running, also check for errors in the browser *developer* tools console - also, have you considered that the image has no EXIF at all, or no Make/Model tags? — Jaromanda X, Sep 02 '23 at 04:29
I made a snippet with the correct CDN libraries. It gives CORS errors here and on jsfiddle - try it from your computer — mplungjan, Sep 02 '23 at 05:19

mplungjan · Accepted Answer · 2023-09-02T05:42:51.967

The code works, but only if the server the image is from the same origin as your script OR that the image server supports CORS

Here is a working version from my server with the image from the same origin

https://plungjan.name/SO/exif/

window.addEventListener("DOMContentLoaded", () => {
  const getExif = (id) => {
    let img1 = document.getElementById(id);
    EXIF.getData(img1, function() {
      console.log("EXIF running"); // 
      var make = EXIF.getTag(this, "Make");
      var model = EXIF.getTag(this, "Model");
      makeAndModel.innerHTML = `${make} ${model}`;
    });
  };
  const makeAndModel = document.getElementById("makeAndModel");
  getExif("img1")
});

Issues with EXIF Library in HTML

1 Answers1