从 HTML5 文件 Api 加载的图像中检索 EXIF 图像元数据？

我正在使用 HTML5文件 API 和文件读取器 http://html5demos.com/file-api.

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 http://blog.nihilogic.dk/2008/05/jquery-exif-data-plugin.html.

HTML:

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

JS:

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

这仅返回一个空集。

我也用文件读取器 JQuery 插件 https://github.com/bgrins/filereader.js.

当我使用加载函数时，我得到一个文件，它是原始 File 对象的扩展。

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

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

如果您的 EXIF 未定义，请使用var EXIF = require('./exif.js'); FTW.

我设法让那头野兽在没有魔术的情况下工作（快速的尝试错误结果）：

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

});