Улучшить функцию getExif

В настоящее время я создаю веб-сайт, который позволяет пользователям загружать изображение в область предварительного просмотра, а затем они могут нажать кнопку, чтобы отобразить информацию EXIF.

Я использую библиотеку exif.js, чтобы сделать эту работу, используя функцию под названием "getExif" ...

На данный момент это действительно работает ... Пользователь загружает картинку, и при нажатии кнопки «Загрузить историю» отображается информация EXIF. В этом случае я заставил его показать карту iFrame с местом захвата, показанным как «маркер», получая информацию GPS, и, кроме того, я также показываю Создателя и модель используемой камеры, а также дату и время захвата.

Это выглядит так:

введите здесь описание изображения

"Проблема":

Некоторые изображения имеют только некоторую информацию EXIF, некоторые вообще нет ...

Я хотел бы изменить свою функцию getExif, чтобы она отображалась как «Нет информации exif», если ее нет, или отображалась как «Нет информации» вместо конкретной информации EXIF ​​...

На данный момент это работает, только если ВСЯ информация, которую я хочу показать, есть на картинке ..

Если я попытаюсь использовать изображение, на котором вся информация находится справа, НО не имеет координат 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
            }

            });


        }




person Rafael Lopes    schedule 20.06.2019    source источник


Ответы (1)


Основная проблема связана с вашими условными операторами, которые устанавливают final_latitude и final_longitude. Что произойдет, если latitude_POS не равно ни N, ни S (например, undefined!). То же самое и с longitude_POS.

Вот что происходит, когда на изображении нет геоданных.

Поэтому для каждого из этих условий используйте последний else, чтобы поймать это условие и выполнить шаги, необходимые для уведомления пользователя об отсутствии геоданных, одновременно установив флаг, чтобы карта не отображалась. .

person Randy Casburn    schedule 20.06.2019
comment
Спасибо! Я внесу эти изменения и дам отзыв - person Rafael Lopes; 20.06.2019