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

Question

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

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

想法是在 Google 地图 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 所依赖的 headers，并且这些文件的 same-origin 策略是 implementation-dependent 但最安全的假设是对待每个文件因为它有自己独特的来源——这意味着在没有网络服务器的情况下加载文件并不是测试任何涉及 XHR 调用的好方法。

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

[Error] Origin null is not allowed by Access-Control-Allow-Origin.

[Error] XMLHttpRequest cannot load https://myriad-online.com/images/forum/IMG_4692.jpg due to access control checks.

通过查看开发人员控制台可以看出（在测试 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 测试您的文件。

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

Exif-js doesn't seem to work with local photos

javascript

html

exif

exif-js