上传多张图片时读取exif信息答案

【问题标题】：reading exif information when uploading multiple images上传多张图片时读取exif信息
【发布时间】：2014-10-18 02:08:33
【问题描述】：

在我的网站上，我让用户一次上传多张图片。如果需要，我想检查每个上传图像的 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

【问题讨论】：

标签： javascript image filereader exif

【解决方案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]);
    }
  });

【讨论】：