更改 P 元素以更新新图像选择 javascript答案

【问题标题】：Change P element to update on new image select javascript更改 P 元素以更新新图像选择 javascript
【发布时间】：2021-08-08 06:15:50
【问题描述】：

我想知道是否有人可以帮助就如何在选择图像后选择图像时如何使 p 标签图片信息和地图链接更新显示的信息提供一些建议。我需要添加或更改什么才能实现这一点。该代码运行一个基本脚本，该脚本从图像中检索 exif 数据（如果有），并生成一个指向谷歌地图的链接，显示位置的位置，并告诉用户照片的拍摄时间和时间以及拍摄的设备开。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>EXIF</title>
</head>

<body>
  <p><input type="file" accept="image/*" name="image" id="file" onchange="loadFile(event)" style="display: none;"></p>
  <p><label for="file" style="cursor: pointer;">Upload Image</label></p>
  <p><img id="output" width="200" /></p>
  <br>
  <p id="pic-info"></p>
  <p id="map-link"></p>


  <script type="text/javascript" src="exif.js"></script>
  <script>
    var loadFile = function(event) {
      var image = document.getElementById('output');
      image.src = URL.createObjectURL(event.target.files[0]);
    };
  </script>

  <script>
    document.getElementById("output").onclick = function() {

      EXIF.getData(this, function() {

        myData = this;

        console.log(myData.exifdata);

        document.getElementById('pic-info').innerHTML = 'This photo was taken on ' + myData.exifdata.DateTime + ' with a ' + myData.exifdata.Make + ' ' + myData.exifdata.Model;

        // 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);

        // 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);

        document.getElementById('map-link').innerHTML = '<a href="http://www.google.com/maps/place/' + latFinal + ',' + lonFinal + '" target="_blank">Google Maps</a>';

      });
    }



    function ConvertDMSToDD(degrees, minutes, seconds, direction) {

      var dd = degrees + (minutes / 60) + (seconds / 3600);

      if (direction == "S" || direction == "W") {
        dd = dd * -1;
      }

      return dd;
    }
  </script>
</body>

</html>

【问题讨论】：

标签： javascript html exif

【解决方案1】：

我们不能停止点击处理程序，但是我们可以在点击时检查“pic-info”中的值是否是以前的值，并跳过“pic-info”和“map”的值更新-链接”。

// code here for updation 
}

<script>
    document.getElementById("output").onclick = function() {

      EXIF.getData(this, function() {

        myData = this;

        console.log(myData.exifdata);

 if(document.getElementById('pic-info').innerHTML === ('This photo was taken on ' + myData.exifdata.DateTime + ' with a ' + myData.exifdata.Make + ' ' + myData.exifdata.Model) )
{

        document.getElementById('pic-info').innerHTML = 'This photo was taken on ' + myData.exifdata.DateTime + ' with a ' + myData.exifdata.Make + ' ' + myData.exifdata.Model;

        // 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);

        // 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);

        document.getElementById('map-link').innerHTML = '<a href="http://www.google.com/maps/place/' + latFinal + ',' + lonFinal + '" target="_blank">Google Maps</a>';

}
      });
    }


  </script>

【讨论】：

我将如何更新/跳过这些值？有什么办法可以为我指明正确的方向吗？谢谢你的回复。
@Oracle22 - 我已经修改了上面的代码并处理了条件。您可以检查这是否解决了您的问题，如果解决了则标记为答案
我用另一种方式解决了这个问题，我刚刚添加了一个刷新页面按钮。代码似乎没有做任何事情。谢谢你的帮助，虽然我真的很感激。