Exchangeable Image File （EXIF）图片信息

Lyrelion

于 2022-10-31 23:30:08 发布

阅读量1k

点赞数

分类专栏：网络安全文章标签： EXIF 网络安全

本文链接：https://blog.csdn.net/Lyrelion/article/details/127624867

版权

网络安全专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. 什么是 EXIF？

2. 通过 EXIF 获取信息

2.1 EXIF 信息查看器（在线）

2.2 使用 JavaScript 获取 EXIF

2.2.1 使用 CDN 引入 exif.js

2.2.2 添加图片

2.2.3 调用 EXIF 方法获取图片信息

2.2.4 最终实现效果

2.3 EXIF 参数说明

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 信息查看器（在线）

EXIF信息查看器无需安装软件，只需上传照片即可查看完整EXIF信息，包括机身、镜头型号、拍摄时间、相机快门次数，支持JPEG、TIFF、CR2、NEF、XMP等多种图片格式。无需下载，比Exif Show, ExifPro更好用的EXIF查看器！https://exif.tuchong.com/

上传一只兔子，获取的图片信息有限

上传一个真实的风景照原图，获取的图片信息很多

使用电脑自带的图片查看器，也可以查看许多详细信息

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>