对我的 javascript 代码的澄清和一些帮助

Question

我有一个问题，也需要有关我的代码的帮助。我正在尝试创建一个可以更新图片元数据的脚本。用户可以上传多张图片，脚本会自动更新列表中的纬度和经度等元数据。由于我是 java 脚本的新手，我不明白为什么当我在 reader.onload 中传递我的所有坐标时，它只获取最后一个坐标并将其分配给我所有的图片。我的想法是：我遍历图像并按时间顺序为每个图像分配一个坐标，然后我将坐标转换为 exifByte。到这里为止一切正常，但是当我尝试将 exifByte 附加到 reader.onload 内的每个图像时，它会获取最后一个坐标并将其分配给我的所有图像。我希望下面的代码对你们来说足够清楚任何解释或帮助将不胜感激

谢谢


<script>

function Initialize() {


    var fileCatcher = document.getElementById('file-catcher');
    var fileInput = document.getElementById('file-input');
    var fileListDisplay = document.getElementById('file-list-display');

  var fileList = [];
  var renderFileList, dispimg;
  var x = [];
  var jpeg;

  fileInput.addEventListener('change', function (evnt) {
    var files = evnt.target.files;
        fileList = [];

    for (var i = 0; i < fileInput.files.length; i++) {
        fileList.push(fileInput.files[i]);
      var file = fileInput.files[i];

      x = (i);
      var gpsIfd = {};
      var rutedata = '<?php echo "$str" ?>';


      points = rutedata.split(";").reverse();
      for (var j=0; j<(points.length-x); j++) {
       var mData = points[j].split(',');}
       console.log("current point:");
       console.log(x)


       var lat = (mData[0]);
       var lng = (mData[1]);

      gpsIfd[piexif.GPSIFD.GPSLatitudeRef] = lat < 0 ? 'S' : 'N';
      gpsIfd[piexif.GPSIFD.GPSLatitude] = piexif.GPSHelper.degToDmsRational(lat);
      gpsIfd[piexif.GPSIFD.GPSLongitudeRef] = lng < 0 ? 'W' : 'E';
      gpsIfd[piexif.GPSIFD.GPSLongitude] = piexif.GPSHelper.degToDmsRational(lng);

      var exifObj = { "GPS":gpsIfd};
      var exifBytes = piexif.dump(exifObj);

      var c = document.createDocumentFragment(); 


      var reader = new FileReader();

      reader.onload = (e) => { // this is the problem loop only the last point'

          var jpeg = piexif.insert(exifBytes, e.target.result);

          console.log(lat); // here is logging the last point only


          var image = new Image();
          image.src = jpeg;
          image.width = 500;
         var el = $("<div></div>").append(image);
         $("#resized").prepend(el);

      };


reader.readAsDataURL(fileInput.files[i]);

    }


    renderFileList();


  });

}


</script>

Answer 1

由于 reader 本质上是异步的，因此您会得到最后一个经纬度。您可以使用闭包来保存数据。否则创建一个函数来传递数据。

更多： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

(function (byte, lats) {
  var reader = new FileReader();

  reader.onload = (e) => {
    var jpeg = piexif.insert(byte, e.target.result);

    console.log(lats); // here is logging the last point only

    var image = new Image();
    image.src = jpeg;
    image.width = 500;
    var el = $("<div></div>").append(image);
    $("#resized").prepend(el);
  };
})(exifBytes, lat);

对我的 javascript 代码的澄清和一些帮助

Clarification and some assistace in my javascript code

javascript

exif

onload