<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>EXIF example with inline EXIF info</title> </head> <body> <img src="DSCN0614_small.jpg" id="img1" /> <pre>Make and model: <span id="makeAndModel"></span></div> <br/> <img src="Bush-dog.jpg" id="img2" /> <pre id="allMetaDataSpan"></pre> <br/> <img src="Bloated-Hero.jpg" id="img3" /><br/> <pre id="img3WithXmpMetaData"></pre> <script type="text/javascript" src="../exif.js"></script> <script> "use strict"; 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"); }); var img3 = document.getElementById("img3"); // EXIF.enableXmp(); EXIF.getData(img3, function() { var allMetaData = EXIF.getAllTags(this); var img3WithXmpMetaData = document.getElementById("img3WithXmpMetaData"); img3WithXmpMetaData.innerHTML = JSON.stringify(allMetaData, null, "\t"); }); } </script> </body> </html>