Ajuda em Projeto WEB

THOR · 20 de Dezembro de 2018

Boas pessoal,

Estou neste momento a realizar um projeto e decidi criar aqui um tópico que possa ser usado para eu esclarecer umas dúvidas que possam surgir com quem estiver disposto a ajudar

Resumo do Projeto:

WebApp que permite fazer upload de uma imagem para desta tirar a informação de GPS (EXIF Data) e depois, com essa informação GPS, criar um widget do google maps com um pin na localização onde foi captada.

Depois seria gerado um link para permitir a partilha da imagem e do widget do google maps em fórums, etc...

Tipo "Gyazo" mas com a informação de localização agregada.

Neste momento ainda estou a estudar como vou fazer toda essa parte da obtenção da EXIF Data (mais especificamente as coordenadas de GPS), já que isto vai ser muito com base em self-learning.

Se desde já tiverem algumas dicas, são sempre bem-vindas.

Cumps

THOR · 20 de Dezembro de 2018

Alguém aqui já utilizou o exif.js? Eu tenho este pedaço de código numa página HTML simples apenas para testar o exif.js mas dá sempre "undefined" para qualquer que seja o "pedaço" de informação de EXIF que eu "peça"... seja o modelo da câmara ou a largura...

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EXIF</title>
</head>

<body>
  
    <img src="image1.jpg" id="img1" />
<br/>

  
  
</body>
  
    <script src="exif.js"></script>

    <script>
  
        window.onload=getExif;

function getExif() {
    var imagem = document.getElementById("img1");

    alert("Largura: " + EXIF.getTag(imagem, "XResolution") + " " + "Image Model: " + EXIF.getTag(imagem, "Model"));
    }
      
    </script>
</html>

XRS · 21 de Dezembro de 2018

Dado que existem várias linguagens de programação web, sugiro que possas indicar qual estás a pensar usar para que seja mais fácil a malta ajudar-te.

Tal como eu, eventualmente todos os utilizadores são mais experts numa linguagem em especifico. Eu tenho mais facilidade em tentar ajudar em PHP do que JS,React,Node, etc, por isso se puderes especificar qual a linguagem de programação que pretendes era mais fácil

THOR · 21 de Dezembro de 2018

XRS disse:
Dado que existem várias linguagens de programação web, sugiro que possas indicar qual estás a pensar usar para que seja mais fácil a malta ajudar-te.

Tal como eu, eventualmente todos os utilizadores são mais experts numa linguagem em especifico. Eu tenho mais facilidade em tentar ajudar em PHP do que JS,React,Node, etc, por isso se puderes especificar qual a linguagem de programação que pretendes era mais fácil

As linguagens que estou a utilizar no projeto são HTML, CSS e JavaScript de momento. Mais para a frente irei utilizar PHP para a ligação à base de dados.

Mas a dúvida de momento recai mesmo sobre a utilização da biblioteca EXIF.js. Não existe muita documentação ou vídeos acerca da mesma e, neste momento a minha simples implementação da mesma não oferece os resultados esperados, como indiquei mais acima...

Cumps

slipknoize · 21 de Dezembro de 2018

No exemplo que eles dão tens de fazer getData antes de acederes às tags:

Código:

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}`;
    });
}

THOR · 21 de Dezembro de 2018

Acabei por publicar uma questão no stackoverflow e já tenho um código funcional

Faltavam detalhes no código e a foto que eu estava a usar por alguma razão (que desconheço) não estava a funcionar...

Código:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EXIF</title>
</head>

<body>
   
    <img src="https://c1.staticflickr.com/5/4867/30883801817_bf122bc498_o.jpg" id="img1" />

    <h1>Modelo da câmara</h1>
    <p id="info_model"></p>

    <script src="exif.js"></script>
       
    <script>
   
        window.onload=getExif;

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

            var model = EXIF.getTag(this, "Model");
               
            var modelo = document.getElementById("info_model");
            modelo.innerHTML = `${model}`;
              });
        }   
    </script>
</body>
</html>

Cumps

THOR · 21 de Dezembro de 2018

slipknoize disse:

No exemplo que eles dão tens de fazer getData antes de acederes às tags:

Código:

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}`;
    });
}

Obrigado pela ajuda. Mas agora existe outro problema. A foto em questão: https://c1.staticflickr.com/5/4867/30883801817_bf122bc498_o.jpg funciona perfeitamente e mostra os dados EXIF, mas se eu transferir a mesma e colocar numa pasta e depois editar a src para a correta, neste caso passando a ser local, o EXIF já não aparece...

Porque é que não funciona para imagens locais?

Cumps

slipknoize · 21 de Dezembro de 2018

Mas dá algum erro na consola? Não vejo razão para não funcionar com uma imagem local...

THOR · 21 de Dezembro de 2018

slipknoize disse:
Mas dá algum erro na consola? Não vejo razão para não funcionar com uma imagem local...

Não. Mas neste momento coloquei esse problema de lado e estou com outro...

Código atual:

Código:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EXIF</title>
  
  
    <style>
  
        img{
            width: 500px;
            max-height: auto;
        }
      
      
      
    </style>
  
  
  
  
</head>

<body>
  
    <img src="https://c1.staticflickr.com/5/4867/30883801817_bf122bc498_o.jpg" id="img1" />
  

    <h1>Latitude</h1>
    <p id="local_lat"></p>
  
    <h1>Latitude Final</h1>
    <p id="local_lat_final"></p>
  
    <h1>Longitude</h1>
    <p id="local_lon"></p>

    <script src="exif.js"></script>
      
    <script>
  
        window.onload=getExif;
  
      
        function getExif() {
              var img1 = document.getElementById("img1");
              EXIF.getData(img1, function() {

            latitude = EXIF.getTag(this, "GPSLatitude");
            var longitude = EXIF.getTag(this, "GPSLongitude");  
              
            var local_lat = document.getElementById("local_lat");
            var local_lon = document.getElementById("local_lon");

            local_lat.innerHTML = `${latitude}`;
            local_lon.innerHTML = `${longitude}`;
              });
          
            var latitude_x = latitude.split(',');
            var latitude_final = toDecimal(latitude_x);

            var local_lat_final = document.getElementById("local_lat_final");
            local_lat_final.innerHTML = `${latitude_final}`;
        }
      
        var toDecimal = function (number) {
          
            var d = Math.floor(number[0]);
            var m = Math.floor(number[1]);
            var s = ((number[1]%1)*60);
          
               return [d,m,s]
        }
      
    </script>
  
</body>
</html>

O valor de latitude, proveniente desta linha: latitude = EXIF.getTag(this, "GPSLatitude"); é uma string: 41,23.0692,0

O 41 são os graus, o 23.0692 são os minutos e o 0 não sei o que é...

O problema é que preciso de converter isto em DMS (degrees, minutes, seconds) para depois converter em "Decimal degrees", que é o que o google maps usa como coordenadas...

Neste momento tenho esse código acima mas de momento não consigo pegar na variável "latitude" e aplicar-lhe a conversão...

Cumps

THOR · 21 de Dezembro de 2018

Ok pessoal... já consegui fazer a conversão dos dados do EXIF para graus decimais, tanto para a latitude como para a longitude. Porém tive de fazê-lo com variáveis de teste, como podem ver no código a VERDE.

Porém, a ideia é converter os dados das variáveis a laranja!!! Mas não consigo!! Alguém me explica porquê?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EXIF</title>

<style>

img{
width: 500px;
max-height: auto;
}

</style>

</head>

<body>

<img src="https://c1.staticflickr.com/5/4867/30883801817_bf122bc498_o.jpg" id="img1" />

<h1>Latitude Exif</h1>
<p id="local_lat"></p>

<h1>Longitude Exif</h1>
<p id="local_lon"></p>

<h1>Latitude Final</h1>
<p id="local_lat_final"></p>

<h1>Longitude Final</h1>
<p id="local_lon_final"></p>

<script src="exif.js"></script>

<script>

window.onload=getExif;

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

latitude = EXIF.getTag(this, "GPSLatitude");
longitude = EXIF.getTag(this, "GPSLongitude");

var local_lat = document.getElementById("local_lat");
var local_lon = document.getElementById("local_lon");

local_lat.innerHTML = `${latitude}`;
local_lon.innerHTML = `${longitude}`;
});

}

/*função para converter latitude e longitude do exif.js
em graus decimais, legíveis pelo google maps*/

var toDecimal = function (number) {

var d = Math.floor(number[0]);
var m = Math.floor(number[1]);
var s = ((number[1]%1)*60);

var dms= d+(m/60)+(s/3600);

return dms

};

var latitude_teste="41,23.0692,0";
var latitude_array = latitude_teste.split(',');
var latitude_final = toDecimal(latitude_array);
var local_lat_final = document.getElementById("local_lat_final");
local_lat_final.innerHTML = `${latitude_final}`;

var longitude_teste="2,6.4013,0";
var longitude_array = longitude_teste.split(',');
var longitude_final = toDecimal(longitude_array);
var local_lon_final = document.getElementById("local_lon_final");
local_lon_final.innerHTML = `${longitude_final}`;

</script>

</body>
</html>

THOR · 27 de Dezembro de 2018

Boas novamente,

Neste código, alguém me consegue explicar como é que posso aceder ao valor da variável latitude, da função getExif(), FORA dessa função? Com o seguinte código não dá qualquer resultado... (O código está incompleto, claro... falta a parte do html etc... mas o relevante está aí).

obrigado desde já

Código:

<script>
   
        window.onload=getExif;
   
       
        function getExif() {
              var img1 = document.getElementById("img1");
              EXIF.getData(img1, function() {

            latitude = EXIF.getTag(this, "GPSLatitude");
            var longitude = EXIF.getTag(this, "GPSLongitude");   
               
            var local_lat = document.getElementById("local_lat");
            var local_lon = document.getElementById("local_lon");

            local_lat.innerHTML = `${latitude}`;
            local_lon.innerHTML = `${longitude}`;
              });
           
           
        }

        /*função para converter latitude e longitude do exif.js
        em graus decimais, legíveis pelo google maps*/

        var toDecimal = function (number) {
           
           
            var d = Math.floor(number[0]);
            var m = Math.floor(number[1]);
            var s = ((number[1]%1)*60);
           
            var dms= d+(m/60)+(s/3600);
           
               return dms
           
        };
       
        var latitude_teste=latitude;
        var latitude_array = latitude_teste.split(',');
        var latitude_final = toDecimal(latitude_array);
        var local_lat_final = document.getElementById("local_lat_final");
        local_lat_final.innerHTML = `${latitude_final}`;

cumps

Slash · 27 de Dezembro de 2018

Acho que o problema é que estas a passar o this para o módulo do exif em vez da imagem (img1?).

EDIT : Não é disso. Não reparei que estavas a passar dentro de um função.

THOR · 27 de Dezembro de 2018

Slash disse:
Acho que o problema é que estas a passar o this para o módulo do exif em vez da imagem (img1?).

EDIT : Não é disso. Não reparei que estavas a passar dentro de um função.

Não consigo mesmo entender o porquê de não conseguir obter qualquer valor quando tento aceder à latitude fora da função...

Se der jeito, fica aí o código completo:

Código:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EXIF</title>
   
   
    <style>
   
        img{
            width: 500px;
            max-height: auto;
        }
       
       
       
    </style>
   
   
   
   
</head>

<body>
   

   
    <img src="https://c1.staticflickr.com/5/4867/30883801817_bf122bc498_o.jpg" id="img1" />
   

    <h1>Latitude Exif</h1>
    <p id="local_lat"></p>
   
    <h1>Longitude Exif</h1>
    <p id="local_lon"></p>
   
    <h1>Latitude Final</h1>
    <p id="local_lat_final"></p>
   
    <h1>Longitude Final</h1>
    <p id="local_lon_final"></p>

    <script src="exif.js"></script>
       
    <script>
   
        window.onload=getExif;
   
       
        function getExif() {
              var img1 = document.getElementById("img1");
              EXIF.getData(img1, function() {

            latitude = EXIF.getTag(this, "GPSLatitude");
            var longitude = EXIF.getTag(this, "GPSLongitude");   
               
            var local_lat = document.getElementById("local_lat");
            var local_lon = document.getElementById("local_lon");

            local_lat.innerHTML = `${latitude}`;
            local_lon.innerHTML = `${longitude}`;
              });
           
           
        }

        /*função para converter latitude e longitude do exif.js
        em graus decimais, legíveis pelo google maps*/

        var toDecimal = function (number) {
           
           
            var d = Math.floor(number[0]);
            var m = Math.floor(number[1]);
            var s = ((number[1]%1)*60);
           
            var dms= d+(m/60)+(s/3600);
           
               return dms
           
        };
       
        var latitude_teste=latitude;
        var latitude_array = latitude_teste.split(',');
        var latitude_final = toDecimal(latitude_array);
        var local_lat_final = document.getElementById("local_lat_final");
        local_lat_final.innerHTML = `${latitude_final}`;
       
        var longitude_teste="2,6.4013,0";
        var longitude_array = longitude_teste.split(',');
        var longitude_final = toDecimal(longitude_array);
        var local_lon_final = document.getElementById("local_lon_final");
        local_lon_final.innerHTML = `${longitude_final}`;
       

    </script>
   
</body>
</html>

Cumps

THOR · 27 de Abril de 2019

Boas pessoal,

De momento já tenho a funcionar um sistema que vai buscar os dados de GPS (latitude e longitude) da fotografia e consequentemente apresenta um mapa google com um "pino" na localização exata...

Agora, porém, vem a parte mais difícil:

A ideia é gerar um género de widget com a imagem e esse mesmo mapa google (ou pelo menos uma "captura" do mapa) lado a lado para poder depois partilhar em fóruns, como este por ex...

Gostaria de saber se alguém daqui já fez algo similar, e se sim, que dessem uma ajuda pois de momento estou um pouco baralhado em relação a como fazê-lo...

toda a ajuda e opiniões são bem-vindos

Cumps

Ajuda em Projeto WEB

THOR

Power Member

THOR

Power Member

XRS

Power Member

THOR

Power Member

slipknoize

1st Folding then Sex

THOR

Power Member

THOR

Power Member

slipknoize

1st Folding then Sex

THOR

Power Member

THOR

Power Member

THOR

Power Member

Slash

Power Member

THOR

Power Member

THOR

Power Member