exif,js只通过多次选择从最后一张照片读取exif数据

3pmvbmvn  于 2022-10-22  发布在  Java
关注(0)|答案(1)|浏览(213)

使用exif。js v3.3.25尝试在上传文件之前从每张照片中获取DateTimeOriginal。lastModified没有显示准确的时间戳,因此exif数据似乎是一个更好的选择。以下代码用于从文件输入中选择单个文件。当选择多个文件时,仅为最后一个文件返回DateTimeOriginal,所有其他文件都“未定义”

function fileSelected() {
var count = document.getElementById("fileData").files.length;
for (var index = 0; index < count; index ++) {
    var file = document.getElementById("fileData").files[index];
    EXIF.getData(file, function() {
        origtime = EXIF.getTag(file, "DateTimeOriginal");
        alert(origtime);
    }); 
}
ggazkfy8

ggazkfy81#

这与var的使用有关。
每次循环运行时,file变量都会被重写。因为EXIF.getData的回调需要一段时间才能运行,当它运行时,file值是最后一个文件(因为这是循环最后一次执行)。
你可能会认为,因为它们在{中,所以你会得到一个新的范围,但对于var,你不会得到(有关详细信息,请参阅Hoisting)。
最简单的修复方法是将var替换为constlet。现在,块/范围将更直观地工作,每次都会创建一个新变量。

document.getElementById("fileData").onchange = function(e) {
  fileSelected();
};

function fileSelected() {
  const fd = document.getElementById("fileData");
  const count = document.getElementById("fileData").files.length;
  for (let index = 0; index < count; index++) {
    const file = document.getElementById("fileData").files[index];
    EXIF.getData(file, function() {
      out.innerHTML += `${file.name}: ${EXIF.getTag(file, "DateTimeOriginal")} ${EXIF.getTag(this, "DateTimeOriginal")}\n`;
    });
  }
}
<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>

Select multiple images:
<input type="file" id="fileData" multiple>
<hr>
<pre id="out"></pre>

如果需要保留var以支持非常旧的浏览器,可以在EXIF.getData的回调中用this替换file。或者,您可以使用IIFEs创建新的作用域。

相关问题