目录
1. 什么是 EXIF?
EXIF(Exchangeable Image File format)是可交换图像文件的缩写,是专门为数码相机的照片设定的,可以记录数码照片的属性信息和拍摄数据。
EXIF 可以附加于 JPEG、TIFF、RIFF、RAW 等文件之中,为其增加有关数码相机拍摄信息的内容和索引图(缩略图)或图像处理软件的版本信息。
上面是从 EXIF 信息查看器官网摘抄的内容,简单理解:
- EXIF 信息是照片详情数据,例如时间、地点、相机参数等
- EXIF 信息存在于 JPEG、TIFF、RIFF、RAW 等格式的文件中,不支持 PNG、WEBP
2. 通过 EXIF 获取信息
2.1 EXIF 信息查看器(在线)
上传一只兔子,获取的图片信息有限
上传一个真实的风景照 原图 ,获取的图片信息很多
使用电脑自带的图片查看器,也可以查看许多详细信息
2.2 使用 JavaScript 获取 EXIF
2.2.1 使用 CDN 引入 exif.js
https://cdn.jsdelivr.net/npm/exif-jshttps://cdn.jsdelivr.net/npm/exif-js
<!-- 引入 exif.js -->
<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
2.2.2 添加图片
<div>
<h3>野香山(原图)</h3>
<img width="300" height="200" id="image1" src="./a.jpg" />
</div>
<div>
<h3>兔子(非原图)</h3>
<img width="200" height="300" id="image2" src="./b.jpg" />
</div>
2.2.3 调用 EXIF 方法获取图片信息
EXIF.getData(img, callback) —— 获取图像的数据
EXIF.getTag(img, tag) —— 获取图像的某项数据
EXIF.getAllTags(img) —— 获取图像的全部数据,值以对象的方式返回
EXIF.pretty(img) —— 获取图像的全部数据,值以字符串的方式返回
<script type="text/javascript">
// 获取图片 DOM
const imageOneDom = document.querySelector("#image1");
// 图片加载完成后,执行 EXIF.getData()
imageOneDom.onload = () => {
EXIF.getData(imageOneDom, function () {
// 获取图像的全部数据,值以字符串的方式返回
const prettyData = EXIF.pretty(this);
console.log('获取图像的全部数据,值以字符串的方式返回 ===', prettyData);
// 获取图像的全部数据,值以对象的方式返回
const getAllTagsData = EXIF.getAllTags(this);
console.log('获取图像的全部数据,值以对象的方式返回 ===', getAllTagsData);
// 获取图像的某个数据
const getTagData = EXIF.getTag(this, 'Make');
console.log('获取图像的某个数据 ===', getTagData);
});
};
</script>
2.2.4 最终实现效果
注意:使用 Live Server 启动项目,否则会出现图片跨域的问题
2.3 EXIF 参数说明
- GPS 相关名称说明
- GPSVersionIDGPS 版本
- GPSLatitudeRef 南北纬
- GPSLatitude 纬度
- GPSLongitudeRef 东西经
- GPSLongitude 经度
- GPSAltitudeRef 海拔参照值
- GPSAltitude 海拔
- GPSTimeStamp GPS 时间戳
- GPSSatellites 测量的卫星
- GPSStatus 接收器状态
- GPSMeasureMode 测量模式
- GPSDOP 测量精度
- GPSSpeedRef 速度单位
- GPSSpeed GPS 接收器速度
- GPSTrackRef 移动方位参照
- GPSTrack 移动方位
- GPSImgDirectionRef 图像方位参照
- GPSImgDirection 图像方位
- GPSMapDatum 地理测量资料
- GPSDestLatitudeRef 目标纬度参照
- GPSDestLatitude 目标纬度
- GPSDestLongitudeRef 目标经度参照
- GPSDestLongitude 目标经度
- GPSDestBearingRef 目标方位参照
- GPSDestBearing 目标方位
- GPSDestDistanceRef 目标距离参照
- GPSDestDistance 目标距离
- GPSProcessingMethod 白平衡
- GPS 处理方法名
- GPSAreaInformation GPS 区功能变数名
- GPSDateStampGPS 日期
- GPSDifferential GPS 修正
参考链接: