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

【问题标题】：Exif-js doesn't seem to work with local photosExif-js 似乎不适用于本地照片
【发布时间】：2019-05-27 01:01:09
【问题描述】：

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

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

这个想法是然后使用谷歌地图 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>

【问题讨论】：

您是从本地 Web 服务器运行它，还是使用 file:// url？可能是origin 问题或类似问题。
@DanielBeck 我的本地图像与 .html 文件位于同一文件夹中。都在我的电脑上本地
这不是我问的。您是通过http:// url 加载此页面，即在您的PC 上运行的本地网络服务器，还是通过file:// url，意味着不涉及网络服务器？如果您使用的是file://，那可能是它不起作用的原因；如果没有网络服务器，许多 AJAX 和相关的东西就无法工作或工作方式不同。
@DanielBeck 我确实在使用“file://”选项
同时我还在网上找到了另一张图片，它确实有 Exif GPS 数据，但在我的代码中不起作用...图片是：myriad-online.com/images/forum/IMG_4692.jpg 所以...一定有一些非常这里发生了错误......

标签： javascript html exif exif-js

【解决方案1】：

这是一个 CORS 问题。

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

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

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

[错误] XMLHttpRequest 无法加载 https://myriad-online.com/images/forum/IMG_4692.jpg由于访问控制检查。

在运行此代码 sn-p 时观察开发人员控制台（测试 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，但对于本地测试，最简单的解决方案是启动本地网络服务器并通过 @ 测试您的文件987654326@ 而不是 file:// URI。

【讨论】：

非常感谢您的帮助！