Exif.js always returns "undefined"

Question

I'm currently developing a simple WEB Application that allows users to upload a photo.

That photo's EXIF GPS data is then supposed to be extracted to a variable that will then be used in a google maps widget, with a "pin" on the location of shooting. The idea is then generate a link for users to be able to share both the photo and the google maps widget on Forums.

The issue at the moment is in the use of the EXIF.js library.

I currently have a simple html page just to test/try this such library and the code is:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EXIF</title>
</head>

<body>

    <img src="image1.jpg" id="img1" />

    <h1>Localização da foto</h1>
    <p id="info_model"></p>


    <script src="exif.js"></script>

    <script>

        window.onload=getExif;

        function getExif() {
            var imagem = document.getElementById("img1");

            var modelo = EXIF.getTag(imagem, "Model");

            document.getElementById("info_model").innerHTML = modelo;

        }

    </script>

</body>


</html>

The expected result should be for it to say: "iPhone 6S Plus"

The actual result is: "undefined"

I can confirm the photo used to test the code does in fact have valid EXIF

New code as suggested:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EXIF</title>
</head>

<body>

    <img src="image1.jpg" id="img1" />

    <h1>Modelo da câmara</h1>
    <p id="info_model"></p>


    <script src="exif.js"></script>

    <script>

        window.onload=getExif;

        function getExif() {
            var img1 = document.getElementById("img1");
            EXIF.getData(img1, function() {

            var model = EXIF.getTag(this, "Model");



            var modelo = document.getElementById("info_model");
            modelo.innerHTML = `${model}`;
            });
        }


    </script>

</body>


</html>

`undefined` is what any `function` in Javascript returns *by default* if you do not **explicitly** `return` something other. — connexo, Dec 21 '18 at 11:41

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

1

getData works asynchronously and as such, needs to be passed a callback function, which your code does not have. You can only call getTag after you've called getData.

See the example on

https://github.com/exif-js/exif-js

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.

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

window.onload = getExif;

<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
<pre>Make and model: <span id="makeAndModel"></span></pre>
<img src="path/to/image.jpg" id="img1" />

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 21 '18 at 11:50

connexo

53,704
14
91
128

Thanks for the help but I've edited the code to my using case and now it doesn't return any value at all. I've edited my question with a "new code" – Rafael Lopes Dec 21 '18 at 12:03
Check the code example in my answer to see it works. – connexo Dec 21 '18 at 12:54
*Note: The EXIF standard applies only to .jpg and .tiff images.* https://github.com/exif-js/exif-js – connexo Dec 21 '18 at 12:56
It does indeed work with that picture but not with my picture... Actually, the "new code" I posted also works with that picture as well... I don't know what the issue is with my picture as it does indeed have valid EXIF... – Rafael Lopes Dec 21 '18 at 13:04
This website can perfectly read the EXIF of the photo I was using to test it: http://exif.regex.info/exif.cgi – Rafael Lopes Dec 21 '18 at 13:11
PS: I've donwloaded this picture https://c1.staticflickr.com/5/4867/30883801817_bf122bc498_o.jpg to my PC and now it can't read the EXIF... So, it can read it if it's on a server but not if it's local? – Rafael Lopes Dec 21 '18 at 13:20

Mike Kovařík · Answer 2 · 2019-11-12T09:31:04.207

I know this may be already solved, but I'd like to offer alternative solution using library exifr. It's new, maintained and actively developed library with focus on performance.

<img src="image1.jpg" id="img1" />
<h1>Modelo da câmara</h1>
<p id="info_model"></p>

<script src="https://unpkg.com/exifr@2.1.3/index.js"></script>
<script>
    async function getExif() {
        var img1 = document.getElementById("img1");
        let output = await exifr.parse(img)
        var model = EXIF.getTag(this, "Model");
        var modelo = document.getElementById("info_model");
        modelo.innerHTML = output.Model;
    }
</script>

The important part here is the async/await. The image is loaded asynchronously so you need to wait until it's loaded and parsed. This is similar to above mentioned callbacks but more modern.

You can check out the library's playground and experiment with images and their output, or check out the .repository and docs

Exif.js always returns "undefined"

2 Answers2