Problems & Solutions. or just how-to.

Main menu

Tag Archives: metadata

Introduction

The pictures we take every day with our mobile or any camera that supports location tagging, contain information on location where the picture was taken. This can be extracted using wide variety of languages like php, javascript, java, etc but today we will be seeing a working model with php.

Prerequisites

The article assumes that the user knows PHP and basic Javascript as well. I will be using jQuery to perform asynchronous file uploads and in case if you don’t know, please read it all here on jQuery.

EXIF Metadata

DEMO: link provided at the end of this article.
EXIF (exchangeable image file) data is a record, showing settings used to take a photograph. This data is recorded into the actual image file. Therefore each photograph has its own unique data. EXIF data stores information like camera model, exposure, aperture, ISO, what camera mode was used and whether or not a flash fired and location information as well.

The image below is an example of what EXIF data looks like. This information differs depending on what EXIF reader is used to see the metadata. The following sample picture is taken with my iPhone 4S and hence you can see all that information here.

Reading EXIF Metadata from PHP

Reading EXIF metadata from PHP is quite easy and straightforward. However, in our case, we give the option for the user to upload the image or use the sample we have in our server. The HTML page bearing the google maps waits for the response from PHP on the exif metadata. Once the data is received, we try to plot the same on the map.

The following code tries to upload the file asynchronously to server to read the image file.

Getting the response and plotting to map is quite easy. The map is already loaded on the page and points to a default location. We are going to alter our center point as well as add marker with Info Window.

One thing you might not have noticed is the conversion of image we uploaded to base64 format. That format is returned and is loaded inside the google info window showing the image inside the google’s popup.
As you can see, the following picture is taken by me at the airport and the picture’s GPS co-ordinates is bang on the target.

Conclusion

What did we just see: We saw the basics of EXIF metadata, how to do that in PHP, how to upload a file asynchronously in jQuery and parse EXIF data and get back. Also, we saw loading non-url images inside google info window.