在前端开发中，处理图片是一个非常常见的需求。在这个过程中，我们经常需要获取图片的 EXIF 信息，如拍摄时间、拍摄地点、曝光时间等等。然而，由于不同设备拍摄的图片可能存在不同的 EXIF 标签，因此在获取 EXIF 信息时需要进行一些处理以保证数据的准确性和一致性。而 exif-normalizer 就是一个能够帮助我们解决这个问题的 npm 包。
本文旨在介绍 exif-normalizer 的使用方法，以及通过一个例子来演示如何在 React 项目中使用该库。
安装 exif-normalizer
使用 npm 可以很方便地安装 exif-normalizer，只需在项目根目录下执行以下命令即可：
npm install exif-normalizer
使用 exif-normalizer
exif-normalizer 主要提供了两个方法：normalize 和 getTag。
normalize 方法可以将传入的图片二进制数据中的 EXIF 信息按照特定规则进行归纳和重构，返回一个包含重构后 EXIF 数据的 JSON 对象。
getTag 方法用于获取指定的 EXIF 标签信息，需要传入图片二进制数据以及要获取的标签名称。
示例代码如下：
import exif from 'exif-normalizer'; // 假设已有一张图片的二进制数据存放在变量 binaryData 中 const exifData = exif.normalize(binaryData); // 获取拍摄时间信息 const dateTime = exif.getTag(binaryData, 'DateTime'); console.log(dateTime);
例子
下面我们来演示如何在 React 项目中使用 exif-normalizer，实现一个上传图片并展示图片信息的小应用。
首先，我们创建一个 FileInput 组件，接收用户选择的文件并将其转换为二进制数据。在 onChange 处理函数中，调用 exif.normalizer 方法获取图片的 EXIF 信息，并将图片信息和 EXIF 信息传递给 ImageInfo 组件进行展示。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ---- ---- ------------------
-------- ----------- -
----- ------ -------- - ---------------
----- ----------- ------------- - ---------------
----- ------------ - ------- -- -
----- ----- - -------------
-- ------------ -- --------------- -
----- ------ - --- ------------
------------- - -- -- -
----- ---------- - --------------
----- -------- - ---------------------------
----- ---- - -
----- ----------
----- ----------
----- ----------
------------
--
-------------------
--
------------------------------------------
-
--
------ -
-----
------ ----------- ----------------------- --
---------- -- ---------- ---------------- ---
------
--
-
-------- ----------- ---- -- -
------ -
-----
---------------------
----------------- ---------
---------------------
---------------------------
--------------------------------------------------
--- --------- ---
------
--
-以上就是使用 exif-normalizer 解析图片 EXIF 信息的一个例子。通过这个例子，我们可以看到 exif-normalizer 简单易用，提供了完备的 API，可以帮助我们快速获取图片的 EXIF 信息，并在前端应用中进行处理和展示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005539781e8991b448d0cc0