Question

我目前正在开发一个简单的WEB应用程序，允许用户上传照片。

然后假定该照片的EXIF GPS数据被提取到一个变量中，然后将其用于google maps小部件中，并在拍摄位置加上“ pin”。然后，这个想法便产生了一个链接，供用户在论坛上共享照片和google maps小部件。

当前的问题是使用EXIF.js库。

我目前有一个简单的html页面，用于测试/尝试这种库，代码为：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EXIF</title>
</head>

<body>

    <img src="image1.jpg" id="img1" />

    <h1>Localização da foto</h1>
    <p id="info_model"></p>


    <script src="exif.js"></script>

    <script>

        window.onload=getExif;

        function getExif() {
            var imagem = document.getElementById("img1");

            var modelo = EXIF.getTag(imagem, "Model");

            document.getElementById("info_model").innerHTML = modelo;

        }

    </script>

</body>


</html>

预期结果应为：“ iPhone 6S Plus”

实际结果是：“未定义”

我可以确认用于测试代码的照片确实具有有效的EXIF

建议使用新代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EXIF</title>
</head>

<body>

    <img src="image1.jpg" id="img1" />

    <h1>Modelo da câmara</h1>
    <p id="info_model"></p>


    <script src="exif.js"></script>

    <script>

        window.onload=getExif;

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

            var model = EXIF.getTag(this, "Model");



            var modelo = document.getElementById("info_model");
            modelo.innerHTML = `${model}`;
            });
        }


    </script>

</body>


</html>

Answer 1

getData 异步运行，因此需要传递回调函数，您的代码没有此功能。致电getTag后，才能致电getData。

请参见示例

https://github.com/exif-js/exif-js

首先调用EXIF.getData函数。您将图像作为参数传递给它：


来自<img src="image.jpg">的图片

或用户在页面上的<input type="file">元素中选择图像。

function getExif() {
  var img1 = document.getElementById("img1");
  EXIF.getData(img1, function() {
    var make = EXIF.getTag(this, "Make");
    var model = EXIF.getTag(this, "Model");
    var makeAndModel = document.getElementById("makeAndModel");
    makeAndModel.innerHTML = `${make} ${model}`;
  });
}

window.onload = getExif;

<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
<pre>Make and model: <span id="makeAndModel"></span></pre>
<img src="path/to/image.jpg" id="img1" />

Answer 2

我知道这可能已经解决，但是我想使用库exifr提供替代解决方案。这是一个新的，维护良好且积极开发的库，注重性能。

<img src="image1.jpg" id="img1" />
<h1>Modelo da câmara</h1>
<p id="info_model"></p>

<script src="https://unpkg.com/exifr@2.1.3/index.js"></script>
<script>
    async function getExif() {
        var img1 = document.getElementById("img1");
        let output = await exifr.parse(img)
        var model = EXIF.getTag(this, "Model");
        var modelo = document.getElementById("info_model");
        modelo.innerHTML = output.Model;
    }
</script>

这里的重要部分是异步/等待。图像是异步加载的，因此您需要等待直到图像被加载和解析。这与上面提到的回调类似，但是更现代。

您可以检出库的playground并尝试图像及其输出，也可以检出。repository and docs

Exif.js始终返回“未定义”

2 个答案: