confile confile - 1 month ago 24
HTML Question

Retrieve EXIF Image Meta Data from HTML5 FileApi loaded Image?

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?

Answer

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