Javascript Exif信息僅在html頁面中第一次點擊圖片後顯示

好吧，我的問題是非常具體的，但我無法在任何地方找到解決方案。Javascript Exif信息僅在html頁面中第一次點擊圖片後顯示

我正在製作一個站點，您可以在其中使用FileReader（）API上傳圖像文件夾，然後顯示它們。當你點擊一個圖像時，它會被最大化，並且使用exif-js庫中的EXIF.pretty（）來顯示Exif信息和谷歌地圖。我有一個「返回」按鈕，可以將您帶回集合

因此，問題是，當我第一次點擊圖片時，它不會顯示EXIF信息，但可以顯示Google地圖。第二次以後，它顯示正確的一切。這發生在每張照片上。

這是我寫的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"; 
    } 
}

有什麼樣的文件看起來在控制檯輸出的第一和第二時間2張照片。 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); 
    }

來源

2016-11-01 antwnis4

你能提供的點擊處理程序來收集EXIF信息的代碼？這聽起來像收集EXIF數據是一個異步過程，你正在以同步方式使用，但我不能確定沒有你的其他代碼。 –

我編輯了我的帖子，我不知道你是否收到通知。 – antwnis4

請問您可以添加這行'console.log（allMetaData）;'而不是'console.log（image）;'並與我們分享這兩個案例的結果？ – EhsanT

我發現了這個問題。說實話很愚蠢。

此：

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

來源

2016-11-02 14:44:16 antwnis4

Javascript Exif信息僅在html頁面中第一次點擊圖片後顯示

回答

相關問題