gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 07:06:47 24 4
gpt4 key购买 nike

我正在尝试添加 javascript 功能,当用户点击显示在页。 (将用它来打开谷歌地图)。当脚本内嵌在 html 文件中时,我设法生成了一个工作示例,但在尝试使用单独的脚本文件 getCoords.js

时却没有

在这里发现了一个类似的问题:How to pass images from server to function in JavaScript?

我想做的是将 html click 事件中的 src 属性传递到脚本中。脚本正在获取 src,我可以将其打印到控制台并通过单击控制台中的链接在 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;
}
}

最佳答案

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

关于javascript - 单击 jpg 图像时尝试使用 EXIF.js 返回 GPS 坐标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62380759/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com