자바 스크립트 Exif 정보는 html 페이지의 이미지를 처음 클릭 한 후에 만 ​​표시됩니다.

Question

좋아, 문제는 매우 구체적이지만 어디서나 해결책을 찾을 수 없습니다.

FileReader() API를 사용하여 이미지 폴더를 업로드하는 사이트를 만들고 있는데이 사이트가 표시됩니다. 이미지를 클릭하면 이미지가 최대화되고 exif-js 라이브러리의 EXIF.pretty()를 사용하여 Google지도와 함께 Exif 정보를 표시합니다. 컬렉션으로 돌아가는 "돌아 가기"버튼이 있습니다.

처음으로 그림을 클릭하면 EXIF ​​정보는 표시되지 않지만 Google지도가 표시 될 수 있습니다. 두 번째로 앞으로 모든 것을 올바르게 표시합니다. 이것은 모든 그림에 일어납니다. 파일이 콘솔의 출력, 제 1 및 제 2 시간으로 모습의이 개 사진이 있습니다

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

:

이

내가 HTML에 EXIF ​​쓰기 자바 스크립트의 일부입니다. The second one appears to have more information. But they are the same exact files

왜 이런 일이 발생합니까? 동일한 배열에서 똑같은 이미지를 클릭하고 있습니다.

감사합니다.

편집 : 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); 
    } 

Answer 1

이 문제가 발견되었습니다. 솔직히 말하면 바보예요.

이 :

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