Retrieve EXIF Image Meta Data from HTML5 FileApi loaded Image?

Question

I am using the 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>

How can I retrieve EXIF meta data from the uploaded image?

I tried to use this.

HTML:

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

JS:

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

This only returns an empty set.

I also use the FileReader JQuery Plugin.

When I use the load function I get a file which is an extension of the original File object.

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

But how do I retrieve the EXIF meta data from it?

@Andreas I use the FileReader JQuery Plugin to retrieve the file: github.com/bgrins/filereader.js I have a file object but I cannot manage to get the meta data. See my question update. Can you please post an answer? — Michael
– Michael, Commented Sep 24, 2013 at 14:14
In your example you're not using the FileReader plugin so did you even try the solution of the linked SO question? Use .readAsBinaryString from a FileReader, wrap this string into a BinaryFile (included in EXIF lib) feed this object to EXIF.readFromBinaryFile(binaryFileObject) — Andreas
– Andreas, Commented Sep 24, 2013 at 15:54

Thomas Praxl · Accepted Answer · 2016-10-17 00:18:10Z

If you're getting EXIF undefined, then use var EXIF = require('./exif.js'); FTW.

I managed to get that beast working without magic tricks (quick&dirty trial&error result):

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

});

chings228 · Accepted Answer · 2017-01-12 07:18:14Z

0

with help of exif.js , the following script can get the exif from file input

$('#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);


});

answered Jan 12, 2017 at 7:18

chings228

1,88924 silver badges24 bronze badges

Comments

Michael · Accepted Answer · 2013-09-24 16:49:27Z

-2

This is the solution:

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

answered Sep 24, 2013 at 16:49

Michael

33.5k50 gold badges225 silver badges375 bronze badges

2 Comments

Amit Patil Over a year ago

I dont know why its says "ReferenceError: exif is not defined", even i have added jquery.exif.js.

Chuck Bergeron Over a year ago

I think this answer requires the exif-js dependency, hence the EXIF not defined errors you are receiving: github.com/exif-js/exif-js (That said it's not a great answer, check this one instead: stackoverflow.com/questions/10341685/…)

Collectives™ on Stack Overflow

Retrieve EXIF Image Meta Data from HTML5 FileApi loaded Image?

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related