чтение информации exif при загрузке нескольких изображений

Question

На моем веб-сайте я позволяю пользователям загружать сразу несколько изображений одновременно. Я бы хотел проверить тег вращения EXIF ​​каждого загруженного изображения, чтобы вручную повернуть изображение в браузере, если это необходимо.

я нашел следующий ответ для считывания значения вращения EXIF ​​для изображения:

https://stackoverflow.com/a/7585267/1720985

Это работает для меня, когда я загрузить один файл, но он не работает, когда я пытаюсь загрузить потому что fr.onloadend заканчивается после того, как все изображения уже были прочитаны.

Моя текущая стратегия - сохранить соответствующие имена изображений и значения вращения в хеш (rotate_images) и использовать этот хэш позже, чтобы применить поворот к визуализированным изображениям на странице.

Это в настоящее время, что у меня есть:

$('#file').change(function(){  
    for(var i = 0; i<this.files.length; i++){ 
     var file = this.files[i]; 
     var file_path = this.files.item(i).name; 
     if(file_path){ 
      var startIndex = (file_path.indexOf('\\') >= 0 ? file_path.lastIndexOf('\\') : file_path.lastIndexOf('/')); 
      var filename = file_path.substring(startIndex); 
      if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) { 
       filename = filename.substring(1); 
      } 
      console.log('uploading image ' + filename); 
     } 
     fr = new FileReader; 
     fr.onloadend = function(){ 
      console.log('getting exif'); 
      var exif = EXIF.readFromBinaryFile(new BinaryFile(this.result)); 
      var orientation = exif.Orientation; 
      console.log(filename +' has orientation ' + orientation); 
      if(orientation != 1){ 
      rotate_images[filename] = orientation; 
      } 
     } 
     fr.readAsBinaryString(file); 
    } 
    }); 

Когда я смотрю на журналы, я получаю следующее:

uploading image camera.JPG 
uploading image robot.JPG 
uploading image snack.jpg 
getting exif 
snack.jpg has orientation 8 
getting exif 
snack.jpg has orientation 8 
getting exif 
snack.jpg has orientation 1 

Вы можете видеть из бревен, что это чтение последнего файла. Как я могу отложить цикл for до тех пор, пока не будет прочитан каждый файл? Или есть другой способ прочитать информацию о ориентации EXIF ​​из нескольких файлов?

Вот сценарии я использую для чтения информации EXIF:

http://www.nihilogic.dk/labs/exif/exif.js

http://www.nihilogic.dk/labs/binaryajax/binaryajax.js

Answer 1

Добавлено слишком рано! Я нашел ответ от этой должности:

https://stackoverflow.com/a/9815648/1720985

Это был мой окончательный код:

$('#file').change(function(){  
    for(var i = 0; i<this.files.length; i++){ 
     (function(file){ 
     var file = file; 
     var file_path = file.name; 
     if(file_path){ 
      var startIndex = (file_path.indexOf('\\') >= 0 ? file_path.lastIndexOf('\\') : file_path.lastIndexOf('/')); 
      var filename = file_path.substring(startIndex); 
      if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) { 
       filename = filename.substring(1); 
      } 
      console.log('uploading image ' + filename); 
     } 
     fr = new FileReader; 
     fr.onloadend = function(e){ 
      console.log('getting exif'); 
      var exif = EXIF.readFromBinaryFile(new BinaryFile(e.target.result)); 
      var orientation = exif.Orientation; 
      console.log(filename +' has orientation ' + orientation); 
      if(orientation != 1){ 
      rotate_images[filename] = orientation; 
      } 
     } 
     fr.readAsBinaryString(file); 
     })(this.files[i]); 
    } 
    });