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访问。通过let selectedImage = info[UIImagePickerControllerOriginalImage] as? UIImage URI加载的页面不包含CORS依赖的标头，并且这些文件的同源策略为implementation-dependent，但最安全的假设是将每个文件视为具有其唯一的来源-这意味着在没有Web服务器的情况下加载文件还不足以测试涉及XHR调用的任何内容。

类似地，您在评论中提到的也存在此问题的站点正在拒绝CORS访问：

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

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

可以通过在运行以下代码段时观看开发人员控制台（测试js代码时始终是个好主意...）可以看出：

houses = ["Shaah's house", "Joseph's house", "Kyle's house", "Stan's house"]

def deliver_presents_recursively(houses):
    # Worker elf doing his work
    if len(houses) == 1:
        house = houses[0]
        print("Delivering presents to", house)
    else:
        mid = len(houses) // 2
        first_half = houses[:mid]
        second_half = houses[mid:]

        # Divides his work among two elves
        deliver_presents_recursively(first_half)
        deliver_presents_recursively(second_half)

file://

您将无法在明确拒绝CORS访问的网站托管的文件上运行exif-js，但是对于本地测试，最简单的解决方案是启动本地网络服务器并通过{ {1}}而不是function getExif() { img1 = document.getElementById("img1"); EXIF.getData(img1, function() { // won't be reached in this example console.log(this); }); } getExif(); URI。

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

1 个答案: