Change P element to update on new image select javascript

  exif, html, javascript

I was wondering if anyone could help give some advice on how to make the p tags pic info and map link update the displayed information when selecting an image after one has already been selected. What would I need to add or change to make this happen. The code runs a basic script that retrieves exif data from images if there is any on it and produces a link to google maps showing where the location is as well as tell the user when and what time the photo was taken and what device it was taken on.

<!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</title>
</head>
<body>
<p><input type="file"  accept="image/*" name="image" id="file"  onchange="loadFile(event)" style="display: none;" ></p>
<p><label for="file" style="cursor: pointer;">Upload Image</label></p>
<p><img id="output" width="200" /></p>
<br>
<p id="pic-info"></p>
<p id="map-link"></p>


    <script type="text/javascript" src="exif.js"></script>
    <script>
    var loadFile = function(event) {
        var image = document.getElementById('output');
        image.src = URL.createObjectURL(event.target.files[0]);
    };
    </script>

    <script>

        document.getElementById("output").onclick = function() {

            EXIF.getData(this, function() {

                myData = this;

                console.log(myData.exifdata);

                document.getElementById('pic-info').innerHTML = 'This photo was taken on ' + myData.exifdata.DateTime + ' with a ' + myData.exifdata.Make + ' ' + myData.exifdata.Model;
                
                // Calculate latitude decimal
                var latDegree = myData.exifdata.GPSLatitude[0].numerator;
                var latMinute = myData.exifdata.GPSLatitude[1].numerator;
                var latSecond = myData.exifdata.GPSLatitude[2].numerator;
                var latDirection = myData.exifdata.GPSLatitudeRef;
                
                var latFinal = ConvertDMSToDD(latDegree, latMinute, latSecond, latDirection);
                console.log(latFinal);

                // Calculate longitude decimal
                var lonDegree = myData.exifdata.GPSLongitude[0].numerator;
                var lonMinute = myData.exifdata.GPSLongitude[1].numerator;
                var lonSecond = myData.exifdata.GPSLongitude[2].numerator;
                var lonDirection = myData.exifdata.GPSLongitudeRef;

                var lonFinal = ConvertDMSToDD(lonDegree, lonMinute, lonSecond, lonDirection);
                console.log(lonFinal);

                document.getElementById('map-link').innerHTML = '<a href="http://www.google.com/maps/place/'+latFinal+','+lonFinal+'" target="_blank">Google Maps</a>';

            });
        }



        function ConvertDMSToDD(degrees, minutes, seconds, direction) {
            
            var dd = degrees + (minutes/60) + (seconds/3600);
            
            if (direction == "S" || direction == "W") {
                dd = dd * -1; 
            }
            
            return dd;
        }
    </script>


</body>
</html>

Source: Ask Javascript Questions

LEAVE A COMMENT