HTML/Javascript Access EXIF data before file uploa

Question

I am trying to extract EXIF data from a image(jpeg) which has been dragged into the browser or has been selected via a html file input element.

I managed to preview the image within the browser using FileReader and FileReader.readAsDataURL as described here.

and I found a EXIF library which allows to extract the EXIF data of an image via javascript. But for me it only works if I use it with normal img tags which load their content over a URL.

I also found this question on StackOverflow where the accepted answer states that it is just not possible.

But I am pretty sure that it can be realized because 500px.com extracts the EXIF data immediately after a file is added for upload and before the upload has been finished.

Some ideas how it should be possible to extract the EXIF data from the base64 encoded image I get from the FileReader?

Answer 1

Have a look at the code of the FxIF firefox extension. It reads exif data using only JavaScript. To read the file contents, you can use the FileReader API of modern browsers.

Answer 2

jQuery-fileExif javascript library reads image exif data before upload.
GitHub link, example jsfiddle from the library.

var someCallback = function(exifObject) {

    $('#cameraModel').val(exifObject.Model);
    $('#lat').val(exifObject.GPSLatitude);
    $('#lng').val(exifObject.GPSLongitude);
    // Uncomment the line below to examine the
    // EXIF object in console to read other values
    //console.log(exifObject);

  }

      try {
        $('#file').change(function() {
            $(this).fileExif(someCallback);
        });
      }
      catch (e) {
        alert(e);
      }

Answer 3

I finally found a client side solution for the problem:

1. Read the file using the FileReader and the method .readAsBinaryString
2. Then wrap that binary string into a BinaryFile object which is already included in the EXIF Library
3. Finally call EXIF.readFromBinaryFile(binaryFileObject);

and its done :)