改善getExif函数

时间:2019-06-20 15:45:44

标签: javascript exif exif-js

我目前正在建立一个允许用户将图片加载到预览区域的网站,然后他们可以按一个按钮以显示EXIF信息。

我正在使用exif.js库通过名为“ getExif”的函数来完成这项工作...

目前,它确实可以正常工作...用户加载图片,并在按下“加载历史记录”按钮时显示EXIF信息。在这种情况下,我通过获取GPS信息显示了iFrame地图,并将捕获位置显示为“标记”,此外,我还显示了所用相机的制造商和型号以及捕获的日期和时间。 / p>

它看起来像这样:

enter image description here

“问题”是:

有些图片只有一些EXIF信息,而根本没有...

我想将getExif函数修改为在没有特定EXIF信息的情况下显示为“ No exif info”或“无信息” ...

目前,仅当我要显示的所有信息都在图片中时,它才起作用。

如果我尝试使用在右侧显示所有信息但没有GPS协调的图像,则根本无法使用...不会显示任何信息...

因此,如果缺少一些EXIF信息,我应该如何修改下面的代码以至少显示某种警报?

(最好是像我之前描述的那样对每个信息元素进行测试...)


// 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
            }

            });


        }



1 个答案:

答案 0 :(得分:1)

主要问题来自设置final_latitudefinal_longitude的条件语句。如果latitude_POS既不是N也不是S(如未定义!),将会发生什么。 longitude_POS也是如此。

当图像中没有地理数据时会发生这种情况。

因此,对于每个条件,请使用最终的else来捕获该条件并执行必要的步骤,以通知用户没有地理数据,同时设置一个标志,因此不会显示地图。