Exif-js似乎不适用于本地照片

Question

我的javascript代码有点奇怪的问题...

它基本上由一个脚本组成，该脚本访问照片的exif，然后将其显示在HTML页面上，更具体地说是其纬度和经度。

这个想法是然后在Google Maps iframe上同时使用纬度和经度，然后显示拍摄照片的位置...

一切正常，但是直到现在，我一直在使用存储在云中的图片进行测试...

如果我尝试使其与本地存储的完全相同的图片一起使用，则该页面上将不会显示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>

Answer 1

这是一个CORS问题。

Exif-js使用ajax请求来检索图像。 Ajax调用需要CORS访问。 通过file:// URI加载的页面不包含CORS依赖的标头，并且这些文件的同源策略取决于实现，但是最安全的假设是将每个文件都视为具有自己唯一的来源-意味着在没有网络服务器的情况下加载文件还不足以测试涉及XHR调用的任何内容。

同样，您在评论中提到的也存在此问题的站点拒绝了CORS访问：

[错误] Access-Control-Allow-Origin不允许使用Origin null。

[错误]由于访问控制检查，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" />

您将无法在明确拒绝CORS访问的网站托管的文件上运行exif-js，但是对于本地测试，最简单的解决方案是启动本地Web服务器并通过http://测试文件而不是file:// URI。

Exif-js似乎不适用于本地照片

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-12-29 17:48:57

Exif-js似乎不适用于本地照片

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-12-29 17:48:57

解决方案1
0 已采纳 2018-12-29 17:48:57