对我的javascript代码进行说明和帮助

Question

我有一个问题，也需要帮助我的代码.我试图创建一个脚本，可以更新图片上的元数据.用户可以上传多张图片，脚本自动更新元数据，如经纬度从一个列表.由于我是一个新手的java脚本，我不明白为什么当我传递我所有的坐标在reader.onload里面，它只采取最后一个，并分配给我所有的图片.我的想法是，我循环通过图像，并分配给每个图像一个坐标按时间顺序.然后我转换坐标到exifByte。我的想法是：我循环浏览图片，并按时间顺序给每张图片分配一个坐标，然后我把坐标转换为exifByte。我的想法是：我按时间顺序给每张图片分配一个坐标，然后我把坐标转换为exifByte，直到这里一切都很好，但是当我试图在reader.onload中给每张图片附加exifByte时，它只取最后一个坐标，并把它分配给我所有的图片.我希望下面的代码对你们来说足够清晰。

谢谢你

<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是async性质的，所以你会得到最后的lat-lang。你可以使用closure来保存数据。Else创建一个函数来传递数据。

更多内容。 https:/developer.mozilla.orgen-USdocsWebJavaScriptClosures

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