Exif.js всегда возвращает "undefined" - PullRequest
Новая
       23

Exif.js всегда возвращает "undefined"

0 голосов
/ 21 декабря 2018

В настоящее время я разрабатываю простое веб-приложение, которое позволяет пользователям загружать фотографии.

Предполагается, что данные EXIF ​​GPS этой фотографии будут извлечены в переменную, которая затем будет использоваться в виджете карт Google с «булавкой» в месте съемки.Идея заключается в том, чтобы создать ссылку для пользователей, чтобы они могли обмениваться фотографиями и виджетом карт Google на форумах.

В настоящий момент проблема заключается в использовании библиотеки EXIF.js.

В настоящее время у меня есть простая html-страница только для того, чтобы протестировать / попробовать эту библиотеку, и код такой: 

<!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>

Ожидаемый результат должен сказать: «iPhone 6S Plus»

Фактический результат: "undefined"

Я могу подтвердить, что фотография, использованная для проверки кода, действительно имеет действительный EXIF ​​

Новый предложенный код: 

<!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>

1 Ответ

0 голосов
/ 21 декабря 2018

getData работает асинхронно и, как таковая, должна быть передана функция обратного вызова , которой нет в вашем коде.Вы можете позвонить getTag только после того, как позвоните getData.

См. Пример на

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

Начните с вызова EXIF.getData функция.Вы передаете ему изображение в качестве параметра:

  • либо изображение из <img src="image.jpg">
  • ИЛИ выбранное пользователем изображение в элементе <input type="file"> на вашей странице. 
<code>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>
...