从HTML5 FileApi加载的图像中检索EXIF图像元数据？

Question

我将使用HTML5的文件API和FileReader。

HTML：

<div id="holder"></div> 

JS：

<script>
var holder = document.getElementById('holder'),
    state = document.getElementById('status');

if (typeof window.FileReader === 'undefined') {
  state.className = 'fail';
} else {
  state.className = 'success';
  state.innerHTML = 'File API & FileReader available';
}

holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
  this.className = '';
  e.preventDefault();

  var file = e.dataTransfer.files[0],
      reader = new FileReader();
  reader.onload = function (event) {
    console.log(event.target);
    holder.style.background = 'url(' + event.target.result + ') no-repeat center';
  };
  console.log(file);
  reader.readAsDataURL(file);

  return false;
};
</script>

如何从上传的图像中检索EXIF元数据？

我尝试使用this。

HTML：

<img src="image1.jpg" id="img1" exif="true" />

JS：

console.log($("#img1").exifPretty());

这只返回一个空集。

我还使用FileReader JQuery Plugin。

当我使用load函数时，我会得到一个扩展原始文件对象的文件。

on:
    load: function(e, file) { }

但是我如何从中检索EXIF元数据？

- confile

---

https://dev59.com/R2kv5IYBdhLWcg3wzj41 - Andreas

@Andreas 我使用FileReader JQuery插件来检索文件：https://github.com/bgrins/filereader.js 我有一个文件对象，但我无法获取元数据。请查看我的问题更新。你能否发布一个答案？ - Michael

在你的例子中，你没有使用FileReader插件，那么你是否尝试过链接的SO问题的解决方案呢？使用FileReader的.readAsBinaryString从中读取字符串，将该字符串包装成BinaryFile（包含在EXIF库中），将此对象提供给EXIF.readFromBinaryFile(binaryFileObject)。 - Andreas

Answer 1

如果你遇到了EXIF未定义的问题，那么请使用var EXIF = require('./exif.js');解决。

我成功地让这个“野兽”工作起来了，而没有使用任何魔法技巧（快速且脏的试错结果）。

'use strict';
var EXIF = require('./exif.js');

$(function() {
    $('#fileinput').on('change', function(){
       var files = this.files,
           i=0;
        for(i=0; i<files.length;++i){
            previewImage(this.files[i]);
        }
    });
    function previewImage(file) {
        var gallery = $('#gallery'),
            thumb = null,
            img = null,
            reader= null;
        if(!file.type.match('image/*')){
            throw 'File type must be an image';
        }

        thumb = $('<div />',{class: 'thumbnail'}).appendTo(gallery);
        img = $('<img />');
        reader = new FileReader();
        reader.onload = function(e){
            img.prop('src',reader.result);
            // important for exif-js! Set src attribute after calling img.prop
            img.src = img.prop('src');
            img.appendTo(thumb);
            EXIF.getData(img, function() {
                console.log(EXIF.pretty(img));
            });
        };
        reader.readAsDataURL(file);
    }

});

- Thomas Praxl

Answer 2

通过 exif.js 的帮助，以下脚本可以从文件输入中获取 exif。

$('#imageupload').change(function(){
    var file = this.files[0];
    var reader = new FileReader();
    reader.onload = function(e) {

        var exif = EXIF.readFromBinaryFile(this.result);
        console.log(exif);


     }

     reader.readAsArrayBuffer(file);


});

- chings228

Answer 3

这是解决方案：

on:
    load: function(event, file) {
    // get image meta data
    var base64 = event.target.result.replace(/^.*?,/,'');
    var binary = atob(base64);
    var exif = EXIF.readFromBinaryFile(new BinaryFile(binary));
}

- Michael

---

我不知道为什么它会显示“ReferenceError: exif未定义”，即使我已经添加了jquery.exif.js。 - www.amitpatil.me

我认为这个答案需要exif-js依赖，因此你收到了“EXIF未定义”的错误：https://github.com/exif-js/exif-js（话虽如此，这不是一个很好的答案，请查看这个答案代替：https://dev59.com/R2kv5IYBdhLWcg3wzj41） - Chuck Bergeron