如何轻松提取照片隐藏信息？EXIF.js 完整教程：从入门到精通

2026-02-05 04:16:32作者：董宙帆

在数字时代，每一张照片背后都藏着丰富的秘密——拍摄设备型号、精确的拍摄时间、甚至是地理位置。EXIF.js 作为一款强大的 JavaScript 库，能帮助开发者轻松读取图像中的 EXIF 元数据，让这些隐藏信息为你所用。无论是调整照片方向、展示拍摄详情，还是构建地理标记功能，这款轻量级工具都能让前端开发变得简单高效。

什么是 EXIF.js？它能为你做什么？

EXIF（可交换图像文件格式）是数码相机在拍摄时自动嵌入照片的元数据，包含了从设备型号到 GPS 坐标的海量信息。EXIF.js 正是解析这些数据的前端利器，无需后端支持，直接在浏览器中完成提取！

图：使用 EXIF.js 提取的照片元数据示例，包含相机型号、拍摄时间等关键信息

核心功能亮点 ✨

纯前端解析：无需服务器，直接在浏览器中处理图像
全面支持标准：兼容 EXIF 2.2 规范，覆盖 .jpg 和 .tiff 格式
简单易用 API：两行代码即可获取所有元数据
轻量无依赖：体积小巧，不依赖任何框架

5 分钟上手！EXIF.js 安装与基础使用

快速安装（3 种方式任选）

1. NPM 安装

npm install exif-js --save

2. Bower 安装

bower install exif-js --save

3. 直接引入 CDN

<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>

第一个示例：获取相机型号

<img id="photo" src="example/dsc_09827.jpg" />
<p>拍摄设备：<span id="camera-model"></span></p>

<script>
// 等待图片加载完成
document.getElementById('photo').onload = function() {
  // 提取 EXIF 数据
  EXIF.getData(this, function() {
    // 获取相机型号标签
    const model = EXIF.getTag(this, 'Model');
    // 显示结果
    document.getElementById('camera-model').textContent = model || '未知设备';
  });
};
</script>

图：使用 EXIF.js 提取相机型号的实际效果

实战技巧：3 个高频应用场景

1. 自动纠正照片方向 📸

手机拍摄的照片常因旋转角度导致显示异常，通过 Orientation 标签可一键修复：

EXIF.getData(img, function() {
  const orientation = EXIF.getTag(this, 'Orientation');
  const style = { transform: '' };
  
  // 根据方向值设置旋转样式
  if (orientation === 6) style.transform = 'rotate(90deg)';
  if (orientation === 8) style.transform = 'rotate(-90deg)';
  
  Object.assign(img.style, style);
});

2. 提取 GPS 位置信息 🗺️

部分照片包含经纬度数据，可用于地图标记：

EXIF.getData(img, function() {
  const latitude = EXIF.getTag(this, 'GPSLatitude');
  const longitude = EXIF.getTag(this, 'GPSLongitude');
  if (latitude && longitude) {
    console.log(`照片拍摄位置：${latitude}°, ${longitude}°`);
  }
});

3. 批量处理上传图片

在文件上传场景中预览元数据：

<input type="file" id="upload" accept="image/jpeg" />

<script>
document.getElementById('upload').addEventListener('change', function(e) {
  const file = e.target.files[0];
  const reader = new FileReader();
  
  reader.onload = function(event) {
    const img = new Image();
    img.onload = function() {
      EXIF.getData(this, function() {
        console.log('上传图片元数据：', EXIF.getAllTags(this));
      });
    };
    img.src = event.target.result;
  };
  
  reader.readAsDataURL(file);
});
</script>

高级用法：深入理解 API

核心方法速查表 📚

方法	作用	示例
`EXIF.getData(img, callback)`	解析图像元数据	`EXIF.getData(img, () => { ... })`
`EXIF.getTag(img, tag)`	获取单个标签值	`EXIF.getTag(img, 'DateTimeOriginal')`
`EXIF.getAllTags(img)`	获取所有标签	`const data = EXIF.getAllTags(img)`
`EXIF.pretty(img)`	格式化输出元数据	`console.log(EXIF.pretty(img))`