I'm currently developing a simple WEB Application that allows users to upload a photo.
That photo's EXIF GPS data is then supposed to be extracted to a variable that will then be used in a google maps widget, with a "pin" on the location of shooting. The idea is then generate a link for users to be able to share both the photo and the google maps widget on Forums.
The issue at the moment is in the use of the EXIF.js library.
I currently have a simple html page just to test/try this such library and the code is:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EXIF</title>
</head>
<body>
<img src="image1.jpg" id="img1" />
<h1>Localização da foto</h1>
<p id="info_model"></p>
<script src="exif.js"></script>
<script>
window.onload=getExif;
function getExif() {
var imagem = document.getElementById("img1");
var modelo = EXIF.getTag(imagem, "Model");
document.getElementById("info_model").innerHTML = modelo;
}
</script>
</body>
</html>
The expected result should be for it to say: "iPhone 6S Plus"
The actual result is: "undefined"
I can confirm the photo used to test the code does in fact have valid EXIF
New code as suggested:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EXIF</title>
</head>
<body>
<img src="image1.jpg" id="img1" />
<h1>Modelo da câmara</h1>
<p id="info_model"></p>
<script src="exif.js"></script>
<script>
window.onload=getExif;
function getExif() {
var img1 = document.getElementById("img1");
EXIF.getData(img1, function() {
var model = EXIF.getTag(this, "Model");
var modelo = document.getElementById("info_model");
modelo.innerHTML = `${model}`;
});
}
</script>
</body>
</html>