Improve the getExif function

Question

I'm currently bulding a website that allows users to load a picture into a preview area and then they can press a button to get the EXIF info shown.

I'm using the exif.js library to make this work using a function called "getExif"...

At the moment it is indeed working... The user loads a picture and when the "Load history" button is pressed the EXIF info is shown. In this case, I made it show a map iFrame with the location of capture shown as a "marker" by getting the GPS information and aside I also show the Maker and model of the camera used as well as date and time of capture.

It looks like this:

The "problem" is:

Some pictures only have some EXIF info, some none at all...

I'd like to modify my getExif function to show like "No exif info" in case there's none or show like "no info" on the place of the specific EXIF info...

At the moment it only works if ALL the info I want to show is in the picture..

If I try to use an image that has all the info on the right BUT has no GPS coordenates it just won't work at all... won't show ANY info...

So, how should I modify the code below to AT LEAST show some kind of alert in case there's some EXIF info missing?

(The best would be to test it for each info element as I described before...)


// Funções para converter a latitude e longitude para um valor legível pelo Google Maps
// Neste caso está a passar de "Degrees Minutes Seconds" (DMS) para decimal

        var toDecimal = function (number) {


            var d = number[0];
            var m = number[1];
            var s = number[2];  
            var dms= (d+(m/60+s/3600)).toFixed(6);

            return dms;

        };

        var toDecimal_Neg = function (number) {


            var d = number[0];
            var m = number[1];
            var s = number[2];

            var dms= (d+(m/60)+s/3600).toFixed(6);
            var dms_neg=-Math.abs(dms);

            return dms_neg;     
        };


        link_mapa = document.getElementById("link");

        botao = document.getElementById("show_exif");

        botao.onclick=getExif;

        function getExif() {
            img1 = document.getElementById("img1");
            EXIF.getData(img1, function() {

            // Criação das variáveis e atribuição de valores às mesmas  

            marca = EXIF.getTag(this, "Make");  // Fabricante da câmara
            modelo = EXIF.getTag(this, "Model");    // Modelo da câmara
            data_hora = EXIF.getTag(this, "DateTimeOriginal") // Data e hora de captura da foto
            latitude = EXIF.getTag(this, "GPSLatitude");    // latitude
            longitude = EXIF.getTag(this, "GPSLongitude");  // longitude
            latitude_POS = EXIF.getTag(this, "GPSLatitudeRef"); // Norte ou Sul --> Consequentemente será positiva ou negativa
            longitude_POS = EXIF.getTag(this, "GPSLongitudeRef"); // Este ou Oeste --> Consequentemente será positiva ou negativa


            // Elementos presentes no código HTML onde se vai apresentar a informação do EXIF através das variáveis criadas acima

            marca_tag = document.getElementById("marca");
            modelo_tag = document.getElementById("modelo");
            data_hora_tag = document.getElementById("data_hora");       
            local_lat = document.getElementById("local_lat");
            local_lon = document.getElementById("local_lon");
            latitude_NS = document.getElementById("lat_NS");                        
            longitude_ES = document.getElementById("lon_ES");

            // Vai testar se a latitude é Norte ou Sul e se a Longitude é Este ou Oeste...
            // Consequentemente serão atribuídos valores negativos ou positivos

            if(latitude_POS==="N"){
                latitude_final = toDecimal(latitude);
            }else if(latitude_POS==="S"){
                latitude_final = toDecimal_Neg(latitude);   
            }
            local_lat_final = document.getElementById("local_lat_final");
            local_lat_final.innerHTML = `${latitude_final}`;

            if(longitude_POS==="E"){
                longitude_final = toDecimal(longitude);
            }else if(longitude_POS==="W"){
                longitude_final = toDecimal_Neg(longitude); 
            }   

            // "Mandar" a informação para os elementos através das variáveis

            marca_tag.innerHTML = `${marca}`;
            modelo_tag.innerHTML = `${modelo}`;

            data_hora_tag.innerHTML = `${data_hora}`;   

            local_lat.innerHTML = `${latitude}`;
            local_lon.innerHTML = `${longitude}`;
            latitude_NS.innerHTML = `${latitude_POS}`;                      
            longitude_ES.innerHTML = `${longitude_POS}`;

            local_lon_final = document.getElementById("local_lon_final");
            local_lon_final.innerHTML = `${longitude_final}`;   

            document.getElementById("mapa_google").src = "https://www.google.com/maps/embed/v1/place?key=AIzaSyDQSbRMCIv1gDsT2qRsY8HvLyZP11hte_Y&q="+latitude_final+"+"+longitude_final;                

            document.getElementById("link_area").value = "https://www.google.com/maps/place?key=AIzaSyDQSbRMCIv1gDsT2qRsY8HvLyZP11hte_Y&q="+latitude_final+"+"+longitude_final; 

            //Mostrar a secção com a info EXIF e redirecionar o ecrã para a mesma

            var x = document.getElementById("exif_itens");
            if (window.getComputedStyle(x).display === "none") {
                x.style.display = "block";

            x.scrollIntoView({ block: 'end',  behavior: 'smooth' }); //Redireciona o ecrã para a área dos dados exif
            }

            });


        }

Improve the getExif function

Answers (1)

Related Questions