HTML/Javascript Access EXIF data before file upload

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?

a newer solution [exif-js](https://github.com/jseidelin/exif-js), based on the same [EXIF_ Library](http://blog.nihilogic.dk/2008/05/reading-exif-data-with-javascript.html) from [http://www.nihilogic.dk/](http://www.nihilogic.dk/) — arty, May 29 '14 at 12:18

score 17 · Accepted Answer · edited Jul 15 '16 at 17:35

17

I finally found a client side solution for the problem:

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

and its done :)

edited Jul 15 '16 at 17:35

Valjas

4,994
1
21
32

answered Apr 27 '12 at 07:12

alex

4,922
7
37
51

Trying to include binaryajax.js in my project causes an access denied error, so this is not a solution for me. – Obi Wan Oct 21 '13 at 15:13
1

The link to nihilogic.dk is dead. – Evan Plaice Mar 03 '15 at 05:03
1

Links to BinaryFile object and EXIF Library are also dead. – MDeuerlein May 29 '16 at 18:04
If you want to use exif-js, see my answer here: http://stackoverflow.com/questions/18981555/retrieve-exif-image-meta-data-from-html5-fileapi-loaded-image#answer-40076913 – it does the trick pretty simple. – Thomas Praxl Oct 17 '16 at 00:26
This code will work without creating an tag: `const fr = new FileReader();` `fr.onload = () => {` `const result = exif.readFromBinaryFile(fr.result);` `};` `fr.readAsArrayBuffer(file);` "file" is an instance of "File" class – grumd May 04 '23 at 17:56

Nasser Al-Wohaibi · Answer 2 · 2012-12-29T12:41:21.763

4

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

edited Dec 29 '12 at 12:41

answered Dec 29 '12 at 12:10

Nasser Al-Wohaibi

4,562
2
36
28

I get Access Denied in jquery simply trying to include the library in my project. – Obi Wan Oct 21 '13 at 15:31

score 3 · Answer 3 · answered Apr 26 '12 at 21:58

3

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.

answered Apr 26 '12 at 21:58

ThiefMaster

310,957
84
592
636

1

I really want to avoid browser extensions. As i mentioned i am already using FileReady but I don't know how to extract the EXIF data from the data I get from FileReader – alex Apr 26 '12 at 22:04

score 0 · Answer 4 · answered May 04 '23 at 18:00

When you get your File class instance via the file input, do this:

import exif from 'exif-js';

const fr = new FileReader();

fr.onload = () => {
  const result = exif.readFromBinaryFile(fr.result);
  //    ^ EXIF data will be here
};

fr.readAsArrayBuffer(file);

HTML/Javascript Access EXIF data before file upload

4 Answers4

Linked