Extracting EXIF with exif.js

[lindquisterik1]

I am having difficulties using the Javascript toolbox to call the exif.js function.

The exif.js function can be downloaded from GitHub - exif-js/exif-js: JavaScript library for reading EXIF image metadata

Before I upload the exif.js file to my root folder on bubble I was wanting to just use the online source:

This I placed in the SEO - Metatags

The demo script shows pulls the ID’s from two images, so I used the Image element twice and set the ID Attribute to img1 and img2 for each of the images, respectively.

Then I put a button on the page to call the exif.js and grab the EXIF data.

To grab the data from the workflow I dropped the Javascript plugin on to the page and set it up as myExifData with suffix myEXIF

The script I used

window.onload=getExif;

function getExif() {
var img1 = document.getElementById(“img1”);
EXIF.getData(img1, function() {
var make = EXIF.getTag(this, “Make”);
var model = EXIF.getTag(this, “Model”);
var makeAndModel = document.getElementById(“makeAndModel”);
makeAndModel.innerHTML = ${make} ${model};
});

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

}

Because the Javascript plugin only returns one (array value), I simplified the above to just pull the EXIF data from the second image “img2”

var img2 = document.getElementById(“img2”);
EXIF.getData(img2, function() {
var allMetaData = EXIF.getAllTags(this);
var allMetaDataSpan = document.getElementById(“allMetaDataSpan”);
allMetaDataSpan.innerHTML = JSON.stringify(allMetaData, null, “\t”);

bubble_fn_myEXIF(allMetaDataSpan);
};

Then finally, I put a text box on my page and set it to the value of myExifData

However, I do not get any results showing up in my text box.

I suspect it is because the the variable declaration for img2 does not actually have access to the ID Attribute “img2”, but I do not know how to fix this?

[lindquisterik1]

Here is a solution

Use the PictureUploader element
And a button to Grab EXIF data

And in the Workflow tun the following JavaScript

var img2 = new Image();
img2.crossOrigin = "Anonymous";
img2.onload = function() {
    EXIF.getData(img2, function() {
        //Get all EXIF tags
  	var allMetaData = EXIF.getAllTags(this);
  	
  	//Delete the MakerNote - this is a very long numerical array
        delete allMetaData.MakerNote;
  	
  	//Convert Lat Deg, Min, sec to Decimal Latitude
  	var Lat = allMetaData.GPSLatitude[0]+allMetaData.GPSLatitude[1]/60+allMetaData.GPSLatitude[2]/3600;

  	//Get the North or South reference
  	var LatRef = allMetaData.GPSLatitudeRef;
  	console.log('LatRef is:', LatRef);
  	
  	//If south change the Decimal Latitude to -Lat
  	if (allMetaData.GPSLatitudeRef.valueOf() == "S") { 
  		Lat = -Lat; 
  	} 

  	console.log('The Latitude is:',Lat);

  	//Convert Long Deg, Min, sec to Decimal Longitude
  	var Long = allMetaData.GPSLongitude[0]+allMetaData.GPSLongitude[1]/60+allMetaData.GPSLongitude[2]/3600;

  	//Get the Easat or West reference
  	var LongRef = allMetaData.GPSLongitudeRef;
  	console.log('LongRef is:', LongRef);

  	//If West change the Decimal Longitude to -Long
  	if (allMetaData.GPSLongitudeRef.valueOf() == "W") { 
  		Long = -Long; 
  	}

  	console.log('The Longitude is:',Long);
  	
  	//If you want the Lat in a string
  	var Lat2 = allMetaData.GPSLatitude.toString();
  	console.log('The Latitude is:',Lat2);
  	
  	//If you want the Long in a string
  	var Long2= allMetaData.GPSLongitude.toString();
  	console.log('The Longitude is:',Long2);

  	//Replace the JSON Array with either a string or a decimal
  	allMetaData.GPSLatitude = Lat;
  	allMetaData.GPSLongitude = Long;

  	//Convert the JSON array of allMetaData to a string with a tab separator
  	var metadatastring = JSON.stringify(allMetaData, null, "\t");

  	//return to bubble a list of EXIF data labels and values
  	bubble_fn_myEXIF(metadatastring.split("\t"));

  	//Return the individual lat and long to two additional Javascript elements 
  	//to use them in a calculation to convert to an address
  	bubble_fn_myLat(Lat);
  	bubble_fn_myLong(Long);

    });
}

//Set the image source to the Picture Uploader’s value
img2.src = “https:” + “PictureUploader A’s value”;

Note you will need to put the following in the Settings → SEO Meta Tags

<script src=“https://cdn.jsdelivr.net/npm/exif-js”></script>

After that you need to add the Javascript Element onto the page to return the EXIF data from the JavaScript call in the workflow.

You can then use myEXIFData values list in a repeating group to show all the EXIF labbels

And then the current cells text in a text box in the first row of the repeating group.

Then drop two more Javascript Elements on the page one with bubble_fn_suffix “myLat” and the other with suffix myLong and drop the bubble map element on the page and use the calculate formula in the marker address.

[lindquisterik1]

The only problem with the above, is when using the PictureUploader on a mobile device and you select Take Photo, the PictureUploader does not capture the EXIF data. I am not sure why, this is. Does anyone know why or how to fix this?

[y11]

Hi, @lindquisterik1

I thought this was a great solution, so I tried it.
However, with the current version, the following error occurs.
Do you know any solutions?

Bug in custom code SyntaxError: Invalid or unexpected token
    at eval (PLUGIN_1488796042609x768734193128308700/Toolbox-action--Run-javascript-.js:3:395)