Question

好的，我的问题非常具体，但我无法在任何地方找到解决方案。

我正在制作一个网站，使用FileReader（）API上传图像文件夹，然后显示它们。当您单击图像时，它会获得最大化，并使用exif-js库中的EXIF.pretty（）显示Exif信息以及Google地图。我有一个＆＃34; Go Back＆＃34;按钮，将您带回集合

所以，问题是，当我第一次点击图片时，它没有显示EXif信息，但可以显示谷歌地图。第二次，它会正确显示所有内容。这种情况发生在每张照片上。

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

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";
    }
}

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

那么，为什么会这样呢？我点击同一阵列中相同的精确图像。

谢谢。

编辑：迈克尔卡姆登：如果我明白你在问什么。这是在我的API中的返回块中：

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页面中第一次单击图像后显示

1 个答案: