<!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>