图片基础知识之exif

EXIF（Exchangeable Image File）是“可交换图像文件”的缩写，当中包含了专门为数码相机的照片而定制的元数据，可以记录数码照片的拍摄参数、缩略图及其他属性信息，简单来说，Exif信息是镶嵌在 JPEG/TIFF 图像文件格式内的一组拍摄参数，需要注意的是EXIF信息是不支持png,webp等图片格式的。（建议自己试的时候，现拍一张，把地理位置信息开启，这样得到的是完整的EXIF信息）

简单来说就是当你拍照片的时候会存储你的一些信息，例如拍摄的位置，拍摄的时间，相机参数等，这些信息的泄露也会给我们造成麻烦。

场景 我们经常在一些聊天软件传输一些照片，例如WX你默认传输的时候他是会被压缩体积很小，应为破坏了EXIF信息，当你设置了原图传输他将保留你照片的EXIF 信息别人只要查看就可以读取你照片的信息。

当我勾选了原图

 

别人下载了之后

可以通过照片的详细信息看到EXIF 版本

 

然后上传到获取EXIF 的网站

 

基本能获取到很多信息例如

Device Manufacturer（设备制造厂商）-> Apple 苹果

当然我们的web js 也是可以读取这些信息的

我们需要一个库的支持EXIF-js

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

用法很简单

<div>
      <img width="300" height="300" id="img1" src="./noOrigin.jpg" alt="">
      <p>非原图</p>
  </div>
  <div>
      <img width="300" height="300" id="img2" src="./origin.jpg" alt="">
      <p>原图</p>
  </div>
  <div>
      <img width="300" height="300" id="img3" src="./2019_03_26_201720.jpg" alt="">
      <p>原图2</p>
  </div>

EXIF.getData(img, callback)获取图像的数据

EXIF.getTag(img, tag)获取图像的某个数据

EXIF.getAllTags(img)获取图像的全部数据，值以对象的方式返回

EXIF.pretty(img)获取图像的全部数据，值以字符串的方式返回

const file = document.querySelector('#img3')
EXIF.getData(file, function () {
    const data = EXIF.pretty(this);
    console.log(data);
})

部分参数说明

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 修正