Reading GPS data using exif-Js

7 בJanuary 2015

3 comments

Reading GPS data using exif-Js

 

Recently I was asked to get location data (latitude & longitude) from an image file.

So I’m here to share with you exif-js library  which I came across with so I can
easily read location data from an image file.

EXIF stands fro Exchangeable Image file Format which is the standard for image files
enables as to extract meta data from the image along with the image itself.

Some of the meta data relates to the location the image was taken, assuming that it was
taken with a GPS  or another location tracking device.

1. Get data from the image element after being loaded.
    To do so, you need to register on the ‘onload’ event of the element.

  imageElement.onload = function () {
                    EXIF.getData(this, function () {

 

2. On the inner function you need to get the tags for latitude and longitude
  

var long = EXIF.getTag(this, 'GPSLongitude');

 

3. Now, the longitude is an array with three elements (degrees, minutes and seconds)
    where each element contains two important properties:
    the numerator and the denominator . (The latitude will have the same structure)

 

4. Now, we might want to use our data for reverse geocoding, while there are geocoding
   providers (such as google maps) that want to receive our data in a decimal form. therefore
  we wish to convert both our latitude and longitude to a decimal form and the calculation
is as follows

 var toDecimal = function (number) {
        return number[0].numerator + number[1].numerator /
            (60 * number[1].denominator) + number[2].numerator / (3600 * number[2].denominator);
    };

The catch here is that sometimes the minutes and second will have a high numerator and high denominator
depends on the accuracy, sometimes we’ll see the denominator equals 1, and sometimes 1,000.

The parameter being sent to the toDecimal function can be the latitude or the longitude, the function works
fine for both.

 

So, to summarize it all  we can read meta-data from an image element using exif-Js using the onload event
handler of the image element. To use our data for reverse geocoding we need to convert the lat-long data
to a decimal format.

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

3 comments

  1. Karthik12 בOctober 2015 ב 6:36

    Hi ran,

    I used exif.js in IOS. It is showing only pixel dimensions, but it is not showing any dateTime or gpsLattitude and longitude.

    Can you please help me with this.

    Reply
    1. Ran Wahle
      Ran Wahle3 בMarch 2016 ב 15:45

      Hi Karthik.

      It could be that the picture file itself doesn’t have this metadata.
      The exif shows data only for pictures that have this data.

      Have you tried the same picture in web browser in another platform?

      Reply
  2. John15 בMarch 2016 ב 6:36

    Thank you for this function. I had a hard time finding one on google for Javascript.

    Reply