Javascript Exif 信息仅在第一次点击 html 页面中的图像后显示

Question

好的，我的问题很具体，但我找不到任何解决方案。

我正在制作一个站点，您可以在其中使用 FileReader() API 上传一个图像文件夹，然后它们就会显示出来。当您单击图像时，它会最大化，并使用 exif-js 库中的 EXIF.pretty() 显示 Exif 信息以及 google 地图。我有一个 "Go Back" 按钮，可以带你回到 collection

所以，问题是，当我第一次点击图片时，它没有显示EXif信息，但是可以显示google地图。第二次开始，它会正确显示所有内容。每张照片都会出现这种情况。

这是 javascript 的一部分，我将 EXIF 写入 html：

function writeEXIFData(image, EXIFelem) {
    var allMetaData = EXIF.pretty(image);
    console.log(image);
    var allMetaDataAside = document.getElementById(EXIFelem);
    var ExifData = document.createElement("div");
    ExifData.id = "EXIFData";
    allMetaDataAside.appendChild(ExifData);
    if (allMetaData !== "") {
        ExifData.innerHTML = allMetaData;
    } else {
        ExifData.innerHTML = "NO DATA AVAILABLE";
    }
}

有 2 张图片显示文件第一次和第二次在控制台输出的内容。The second one appears to have more information. But they are the same exact files

那么，为什么会这样？我正在单击来自同一数组的完全相同的图像。

谢谢。

编辑：Michael Camden：如果我理解您的问题。这是在我的 API 中的 return 块中：

showImage: function (index, elem, EXIFelem) {
    document.getElementById(elem).innerHTML = "";
    var file = loadedImages[index];
    var reader = new FileReader();
    reader.onload = (function (file) {
        return function (event) {
            // Render thumbnail.
            var div = document.createElement("div");
            div.className = "maximize";
            div.innerHTML = ['<img src="', event.target.result, '" title="', encodeURI(file.name), '">'].join('');
            document.getElementById(elem).insertBefore(div, null);
        };
    }(file));
        // Read in the image file as a data URL.
        reader.readAsDataURL(file);
        TIV3446.makePreviousbtn(elem, EXIFelem);
        TIV3446.showImageDetailedExifInfo(index, EXIFelem);
        TIV3446.showImageDetailedExifWithMap(index, EXIFelem);
}

showImageDetailedExifInfo: function (index, EXIFelem) {
    EXIF.getData(loadedImages[index], writeEXIFData(loadedImages[index], EXIFelem));
}

Edit2：我发送的代码可能不是您要的。还有这个：

    var i;
    var file;
    var reader;
    for (i = 0; i < loadedImages.length; i += 1) {
        file = loadedImages[i];
        reader = new FileReader();
        // Closure to capture the file information.
        reader.onload = (function (file, index) {
            return function (event) {
                // Render thumbnail.
                var div = document.createElement("div");
                div.className = "tile";
                div.addEventListener("click", function () {TIV3446.showImage(index, elem, EXIFelem);});
                div.innerHTML = ['<img src="', event.target.result, '" title="', encodeURI(file.name), '">', '<div class="info">', encodeURI(file.name).slice(0, -4)].join('');
                document.getElementById(elem).insertBefore(div, null);
            };
        }(file, i));
        // Read in the image file as a data URL.
        reader.readAsDataURL(file);
    }

Answer 1

我发现了问题。说实话很愚蠢。

这个：

showImageDetailedExifInfo: function (index, EXIFelem) {
    EXIF.getData(loadedImages[index], writeEXIFData(loadedImages[index],  EXIFelem));
}

必须这样写：

showImageDetailedExifInfo: function (index, EXIFelem) {
    EXIF.getData(loadedImages[index], function () {
        writeEXIFData(loadedImages[index], EXIFelem)
    });
}

Javascript Exif 信息仅在第一次点击 html 页面中的图像后显示

Javascript Exif information only showing after the first click of image in html page

javascript

file

exif