使用EXIF.js提取图片元数据：二次调用返回错误数据排查

场景与代码 #

我使用EXIF.js库提取图片元数据，相关代码如下：

元数据提取函数 #

Extract_Image_File_Metadata = function (p_Element) {
    // 省略其他逻辑
    var l_Thumb = document.getElementById(p_Element);

    EXIF.getData(l_Thumb, function() {
        var allMetaData = EXIF.getAllTags(l_Thumb);

        console.log("For File: " + document.getElementById(p_Element).src + " - EXIF result: " + JSON.stringify(allMetaData.DateTime));
        
        // 省略其他逻辑
    });
}

对应HTML元素 #

<img id="Shown_Image" 
     style="width:100%;height:99%;object-fit: scale-down; overflow: hidden ;display:block" 
     src="" alt=""
> 

异常现象 #

1. 首次调用Extract_Image_File_Metadata能正确获取元数据，但替换同一<img>元素的src属性更换图片后，再次调用函数返回的仍是第一张图片的元数据：

For File: http://10.0.0.3:53457/20230911_094059.jpg - EXIF result: "2023:09:11 09:40:59"
For File: http://10.0.0.3:53457/20230911_094225.jpg - EXIF result: "2023:09:11 09:40:59"

2. 重启程序后直接处理第二张图片，能获取正确的元数据：

For File: http://10.0.0.3:53457/20230911_094225.jpg - EXIF result: "2023:09:11 09:42:25"

3. 首次调用EXIF.getData后，后续即使不更换图片，再次调用该方法会返回undefined，而非预期的布尔值。

原因与解决办法 #

核心原因 #

EXIF.js会将解析后的元数据缓存到<img>元素的__exifdata__属性中，后续调用时优先读取缓存，不会重新解析新图片；同时首次解析完成后，EXIF.getData的内部逻辑会跳过重新解析流程，导致返回undefined。

修复步骤 #

1. 清除旧缓存：在更换图片src或调用EXIF.getData前，手动删除<img>元素上的__exifdata__缓存：

   var img = document.getElementById(p_Element);
   delete img.__exifdata__;
   

2. 确保图片加载完成后再解析：更换src后图片是异步加载的，直接调用解析函数会读取旧缓存或未加载完成的数据，需监听load事件：

   Extract_Image_File_Metadata = function (p_Element) {
       var l_Thumb = document.getElementById(p_Element);
       
       // 清除旧缓存
       delete l_Thumb.__exifdata__;
       
       // 定义解析逻辑
       var parseExif = function() {
           EXIF.getData(l_Thumb, function() {
               var allMetaData = EXIF.getAllTags(l_Thumb);
               console.log("For File: " + l_Thumb.src + " - EXIF result: " + JSON.stringify(allMetaData.DateTime));
           });
       };
       
       // 绑定加载完成事件
       l_Thumb.addEventListener('load', parseExif);
       
       // 若图片已从缓存加载完成，手动触发解析
       if (l_Thumb.complete) {
           parseExif();
           // 移除重复监听，避免多次触发
           l_Thumb.removeEventListener('load', parseExif);
       }
   }
   

3. 避免重复事件绑定：每次调用函数时，建议先移除之前绑定的load事件监听，防止同一图片加载完成后多次触发解析逻辑。

内容的提问来源于stack exchange，提问作者FDavidov