CODEWITHSUNDEEP
javascripthtmlmetadataexifexif-js
AmericanMade
AmericanMade

Reputation: 463

Extracting EXIF data (specifically dateTime and GPSLatitude and GPSLongitude) with JavaScript

I have a program where a camera is set up to constantly take pictures (about every 10 seconds or so) and the picture is sent to a folder on my server and then another program refreshes that folder constantly so that I always just have the most recent picture in that particular folder.

An HTML document exists that also constantly refreshes, and references that picture location to get and display the newest image.

What I'm trying to do is extract the EXIF data (that I've verified exists when I save the image from the active webpage and look at it's properties). I want to display the DateCreated (I believe this is DateTime) and the Latitude and Longitude (I believe is GPSLatitude and GPSLongitude).

I came across this library, exif-js, which seems like the go-to for most people trying to do this same thing in JavaScript. My code looks the same as the code at the bottom of the README.md file, except I changed out my img id="...." and variable names, (see below). It seems like it should work, but it's not producing any data. My empty span element just stays empty.

Is there an issue with the short time span that the page has before refreshing?

Thanks for any help!

Here's what my code currently looks like (just trying to get the DateTime info). I have also tried the GPSLatitude and GPSLongitude tags.

<!-- Library to extract EXIF data -->

<script src="vendors/exif-js/exif-js"></script>
<script type="text/javascript">
window.onload=getExif;
function getExif()
{
    var img1 = document.getElementById("img1");
    EXIF.getData(img1, function() {
        var time = EXIF.getTag(this, "DateTime");
        var img1Time = document.getElementById("img1Time");
        img1Time.innerHTML = `${time}`;
    });

    var img2 = document.getElementById("img2");
    EXIF.getData(img2, function() {
        var allMetaData = EXIF.getALLTags(this);
        var allMetaDataSpan = document.getElementById("Img2Time");
        allMetaDataSpan.innerHTML = JSON.stringify(allMetaData, null, "\t");        
    });
	
}

</script>

Upvotes: 0

Views: 2101

Answers (2)

Mike Kovař&#237;k
Mike Kovař&#237;k

Reputation: 312

I know this may be already solved but I'd like to offer an alternative solution, for the people stumbling upon this question.

I'm a developer of a new library exifr you might want to try. It's maintained, actively developed library with focus on performance and works in both nodejs and browser.

    async function getExif() {
        let output = await exifr.parse(imgBuffer)
        console.log('latitude', output.latitude) // converted by the library
        console.log('longitude', output.longitude) // converted by the library
        console.log('GPSLatitude', output.GPSLatitude) // raw value
        console.log('GPSLongitude', output.GPSLongitude) // raw value
        console.log('GPSDateStamp', output.GPSDateStamp)
        console.log('DateTimeOriginal', output.DateTimeOriginal)
        console.log('DateTimeDigitized', output.DateTimeDigitized)
        console.log('ModifyDate', output.ModifyDate)
    }

You can also try out the library's playground and experiment with images and their output, or check out the repository and docs.

Upvotes: 0

Faizan Ahmed
Faizan Ahmed

Reputation: 1

go into ur exif.js file and then go to line 930 and then change it to 

EXIF.getData = function(img, callback) {
if ((self.Image && img instanceof self.Image
|| self.HTMLImageElement && img instanceof self.HTMLImageElement)
&& !img.complete)
return false;

Upvotes: 0

Related Questions