如何在 HTML 中正确使用 exif-js 库读取图片 EXIF 元数据

本文详解 exif-js 在浏览器中无法读取 exif 数据的常见原因（主要是 cors 限制），提供可立即运行的修复方案、完整示例代码及关键注意事项，帮助开发者快速解决跨域图片元数据读取失败问题。 本文详解 exif-js 在浏览器中无法读取 exif 数据的常见原因（主要是 cors 限制），提供可立即运行的修复方案、完整示例代码及关键注意事项，帮助开发者快速解决跨域图片元数据读取失败问题。在 Web 开发中，使用 exif-js（现维护分支为 exif2）提取 JPEG 图片的相机型号、拍摄时间、GPS 坐标等 EXIF 元数据，是图像处理类应用的常见需求。然而，许多开发者会遇到"EXIF 数据始终为空""回调不执行""控制台无报错但 make/model 为 undefined"等问题------根本原因往往不是代码错误，而是浏览器的跨域资源共享（CORS）策略限制。exif-js 的 EXIF.getData() 方法底层依赖 <img> 元素的 naturalWidth/naturalHeight 属性，并通过 Canvas 绘制图片后读取像素数据（以解析嵌入的 EXIF 段）。该流程要求图片资源必须满足以下任一条件：图片与当前 HTML 页面同源（即协议、域名、端口完全一致）； 图片服务器明确允许跨域访问（响应头包含 Access-Control-Allow-Origin: * 或指定域名）。而问题中引用的 DPreview 示例图： <img src="https://2.img-dpreview.com/files/p/TS1200x900\~sample_galleries/0861943200/2984823081.jpg" id="img1" />其服务端未配置 CORS 头，因此浏览器拒绝将图片绘制到 Canvas（触发 SecurityError），导致 EXIF.getData() 内部静默失败------这也是为何控制台看似无报错、但回调函数内 EXIF.getTag() 始终返回 undefined。立即学习"前端免费学习笔记（深入）"； 稿定AI 拥有线稿上色优化、图片重绘、人物姿势检测、涂鸦完善等功能