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]);
    }
  });

上传多个图像时读取exif信息

1 个答案: