Exif-js не работает с локальными фотографиями - PullRequest
Новая
       32

Exif-js не работает с локальными фотографиями

0 голосов
/ 29 декабря 2018

У меня немного странная проблема с моим кодом JavaScript ...

В основном он состоит из сценария, который обращается к exif фотографии и затем показывает его на HTML-странице, более конкретноего широта и долгота.

Идея состоит в том, чтобы затем использовать и широту, и долготу в iframe карт Google, чтобы затем показать местоположение, где была сделана фотография ...

Это все работаетно до сих пор я использовал изображение, хранящееся в облаке, для тестирования ...

Если я попытаюсь заставить его работать с тем же самым точным изображением, сохраненным локально, информация EXIF ​​не появитсяна странице ...

(я также пробовал с некоторыми из моих собственных картинок, которые имеют exif-информацию, и она все еще не работает ...)

Почему это похоже наExif-js работает только с изображениями, хранящимися на сервере? 

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

<body>

    <!-- If I use this it works: -->

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

    <!-- If I use this it DOESN'T work: -->

    <img src="image3.jpg" id="img1"/> <!-- IT'S THE SAME IMAGE AND IT DOES HAVE EXIF-->

    <iframe id="mapa_google" src="" width="640" height="480"></iframe>


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

        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

        };


        window.onload=getExif;

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

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

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

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


            latitude_final = toDecimal(latitude);
            local_lat_final = document.getElementById("local_lat_final");
            local_lat_final.innerHTML = `${latitude_final}`;

            longitude_final = toDecimal(longitude);
            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;        

            });

        }

        getExif();


    </script>

</body>
</html>

1 Ответ

0 голосов
/ 29 декабря 2018

Это проблема CORS.

Exif-js использует ajax-запрос для получения изображения.Ajax-вызовы требуют доступа к CORS.Страницы, загруженные с помощью file:// URI, не содержат заголовков, от которых зависит CORS, и политика этих же источников для этих файлов зависит от реализации , но самое безопасное предположение заключается в том, чтобы рассматривать каждый файл как имеющий свой собственныйуникальное происхождение - это означает, что загрузка файлов без веб-сервера не является достаточно хорошим способом для тестирования всего, что связано с вызовами XHR.

Точно так же, на сайте, о котором вы упоминали в комментариях, также есть проблема с доступом к CORS:

[Ошибка] Нулевой источник не разрешен Access-Control-Allow-Origin.

[Ошибка] XMLHttpRequest не может загрузить https://myriad -online.com /images / forum / IMG_4692.jpg из-за проверок контроля доступа.

, что можно увидеть, наблюдая за консолью разработчика (всегда хорошая идея при тестировании js-кода ...) во время выполнения этогофрагмент кода: 

function getExif() {
  img1 = document.getElementById("img1");
  EXIF.getData(img1, function() {
    // won't be reached in this example
    console.log(this);
  });
}

getExif();
<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
<img src="http://myriad-online.com/images/forum/IMG_4692.jpg" id="img1" />

Вы не сможете запускать exif-js для файлов, размещенных на сайтах, которые явно запрещают доступ к CORS, но для локального тестирования самое простое решение - этобудет раскручивать локальный веб-сервер и тестировать ваши файлы через http:// вместо file:// URI.

...