Я пытаюсь добавить функцию javascript, которая будет возвращать координаты gps из данных exif, когда пользователь щелкает jpg, отображаемый на странице. (Будет использовать это, чтобы открыть карту Google). Мне удалось создать рабочий пример, когда сценарий встроен в файл html, но не при попытке использовать отдельный файл сценария, getCoords.js

Здесь нашел аналогичный вопрос: Как передавать изображения с сервера работать в JavaScript?

Я пытаюсь передать атрибут src из HTML-события click в скрипт. Сценарий получает src, я могу распечатать его на консоли и запустить jpg в devtools, щелкнув ссылку в консоли. Но, похоже, он даже не пытается бежать

EXIF.getData(my_image, function() {...

Вот HTML:

<html lang="en">
    <head>
        <title>Map Test Home</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="styles.css" rel="stylesheet">
        <script src="getCoords.js"></script>
        <script
            src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.min.js">
        </script>
        <script
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBMLVQ6kCIfX4c8vVHa0qOf8P87DxCvt2w">
        </script>
    </head>
    <body>
        <picture>
            <source media="(min-width: 750px)" srcset="images/van_from_erp2_L.jpg 2x, images/van_from_erp2_m.jpg 1x" />
            <source media="(min-width: 450px)" srcset="images/van_from_erp2_m.jpg" />
            <img src="images/van_from_erp2_s.jpg" id="hiking_0" alt="View of Vancouver from ridge" onclick='getCoords(src)'>
        </picture>

        <picture>
            <source media="(min-width: 750px)" srcset="images/creek_1_l.jpg 2x, images/creek_1_m.jpg 1x" />
            <source media="(min-width: 450px)" srcset="images/creek_1_m.jpg" />
            <img src="images/creek_1_s.jpg" id="hiking_1" alt="forest creek image" onclick='Hello(id)'>
        </picture>

        <!--div id="map"></div-->



    </body>
</html>

И вот сценарий:

function getCoords(source) {
    console.log(source);
            //pass image to EXIF.js to return EXIF data (EXIF.js sourced from github)

            let my_image = new Image();
            my_image.src = source;
            console.log("hello from line 7");
            EXIF.getData(my_image, function() {
                console.log("Hello from line 9");
                    myData = this;
                    console.log(myData.exifdata);

            // get latitude from exif data and calculate latitude decimal
            var latDegree = myData.exifdata.GPSLatitude[0].numerator;
            var latMinute = myData.exifdata.GPSLatitude[1].numerator;
            var latSecond = myData.exifdata.GPSLatitude[2].numerator;
            var latDirection = myData.exifdata.GPSLatitudeRef;

            var latFinal = ConvertDMSToDD(latDegree, latMinute, latSecond, latDirection);
            //console.log(latFinal);

            // get longitude from exif data and calculate longitude decimal
            var lonDegree = myData.exifdata.GPSLongitude[0].numerator;
            var lonMinute = myData.exifdata.GPSLongitude[1].numerator;
            var lonSecond = myData.exifdata.GPSLongitude[2].numerator;
            var lonDirection = myData.exifdata.GPSLongitudeRef;

            var lonFinal = ConvertDMSToDD(lonDegree, lonMinute, lonSecond, lonDirection);
            //console.log(lonFinal);

            let site = [latFinal, lonFinal];
            console.log(site);

            return(site);

            // Create Google Maps link for the location
            //document.getElementById('map-link').innerHTML = '<a href="http://www.google.com/maps/place/'+site[0]+','+site[1]+'" target="_blank">Google Maps</a>';

                });
            //};

            function ConvertDMSToDD(degrees, minutes, seconds, direction) {
                var dd = degrees + (minutes/60) + (seconds/360000);
                if (direction == "S" || direction == "W") {
                    dd = dd * -1;
                }
                return dd;
            }
}
1
Hobbes14 15 Июн 2020 в 06:11

1 ответ

Лучший ответ

Поместите EXIF.getData(my_image, function() {...} в функцию загрузки изображения:

my_image.onload = function() {
  EXIF.getData(my_image, function() {...}
}

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

0
Hangindev 15 Июн 2020 в 03:31