Извлечь метафайлы EXIF-изображений из загруженного изображения HTML5 FileApi?

Question

Я использую HTML5 File 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.

Когда я использую функцию загрузки, я получаю файл, который является расширением исходного объекта File.

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

Но как я могу извлечь EXIF ​​мета данные из него?

Answer 1

Это решение:

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

Answer 2

Если вы получаете 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); 
    } 

}); 

Answer 3

с помощью 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); 


});