Разъяснение и некоторая помощь в моем коде javascript - PullRequest
Новая
       99

Разъяснение и некоторая помощь в моем коде javascript

0 голосов
/ 07 мая 2020

У меня есть вопрос, и мне тоже нужна помощь с моим кодом. Я пытаюсь создать скрипт, который может обновлять метаданные на картинке. Пользователь может загрузить несколько изображений, и сценарий автоматически обновит метаданные, такие как широта и долгота, из списка. Поскольку я новичок ie в java скрипте, я не могу понять, почему, когда я передаю все свои координаты внутри reader.onload, он берет только последний и назначает его всем моим изображениям. Моя идея такова: я просматриваю oop изображения и назначаю каждому изображению одну координату в хронологическом порядке, затем я конвертирую координату в 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>

1 Ответ

1 голос
/ 07 мая 2020

Так как reader по своей природе является асинхронным c, вы получаете последний лат и язык. Вы можете использовать закрытие для хранения данных. В противном случае создайте функцию для передачи данных.

Подробнее: 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);
...