Информация о Javascript Exif отображается только после первого щелчка изображения на странице html

Хорошо, моя проблема довольно специфична, но я не могу найти решение нигде.

Я создаю сайт, на который вы загружаете папку изображений с помощью API FileReader (), и они отображаются. При нажатии на изображение, оно получает развернутый и, используя EXIF.pretty () из библиотеки exif-js отображается информация Exif вместе с картой google. У меня есть кнопка «вернуться», которая возвращает вас в коллекцию

Проблема в том, что когда я нажимаю на картинку в первый раз, она не показывает никакой информации 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 изображения того, что файл выглядит как выходные данные в консоли в первый и второй раз.Второй, кажется, имеет больше информации. Но это те же самые файлы

Так почему же это происходит? Я щелкаю те же самые точные изображения из того же массива.

Спасибо!.

Edit: Michael Camden: если я понял, о чем вы спрашиваете.
Это внутри моего 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);
    }

1 ответ

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