单击 jpg 图像时尝试使用 EXIF.js 到 return GPS 坐标

Question

我正在尝试添加 javascript 功能，当用户单击页面上显示的 jpg 时，该功能将 return gps 来自 exif 数据的坐标。（将用它来打开 google 地图）。当脚本在 html 文件中内联时，我设法生成了一个工作示例，但在尝试使用单独的脚本文件 getCoords.js

时却没有

在这里发现了一个类似的问题：

我想做的是将 html click 事件中的 src 属性传递到脚本中。脚本正在获取 src，我可以将其打印到控制台并通过单击控制台中的 link 在 devtools 中启动 jpg。但它似乎甚至没有尝试运行

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

Answer 1

将EXIF.getData(my_image, function() {...}放入图像加载函数中：

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

Note that you have to wait for the image to be completely loaded, before calling getData or any other function. It will silently fail otherwise. Docs

单击 jpg 图像时尝试使用 EXIF.js 到 return GPS 坐标

Trying to use EXIF.js to return GPS coords when a jpg image is clicked

javascript

jpeg

exif