当单击jpg图像时尝试使用EXIF.js返回GPS坐标

问题描述 投票:0回答:1

我正在尝试添加javascript功能,当用户单击页面上显示的gps时,该功能将从exif数据返回jpg坐标。 (将用它来打开谷歌地图)。当脚本在html文件中内联时,我设法产生了一个工作示例,但在尝试使用单独的脚本文件时却没有,getCoords.js

在这里找到类似的问题:How to pass images from server to function in 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;
            }
}
javascript jpeg exif
1个回答
0
投票

EXIF.getData(my_image, function() {...}放在图像加载功能内:

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

请注意,您必须等待图像完全加载完毕, 在调用getData或任何其他函数之前。它会无声地失败 除此以外。 Docs

热门问题
推荐问题
最新问题