在前端开发中，图片的处理是不可避免的问题，而有些前端开发者需要在图片上传后对其进行裁剪、调整大小等处理，但是因为图片本身包含了exif信息，这就导致在图片处理后exif信息会发生错乱，如方向不正确等问题。而这时就可以使用npm包 exif-normalizer-blob 来解决这个问题。本文将详细介绍exif-normalizer-blob的使用教程。
exif-normalizer-blob是什么？
exif-normalizer-blob 是一个 npm 包，可以解析出图片的 exif 信息，然后通过旋转、翻转等方式调整图片方向，保障图片正常显示。同时也可以去掉 exif 信息，避免一些潜在信息泄漏的安全问题。
如何安装 exif-normalizer-blob
可以通过npm指令安装exif-normalizer-blob
npm i exif-normalizer-blob
exif-normalizer-blob 的使用
exif-normalizer-blob 依赖于Blob对象以及Image对象，因此当使用 exif-normalizer-blob 的时候，需要在处理之前确保文件以Blob对象的形式存在，并且 Image 对象已经加载。 exif-normalizer-blob 提供了三个方法：
- normalize：根据 exif 信息调整图片的方向
- removeExif：移除 exif 信息
- hasExif：是否有 exif 信息
示例代码：
-- -------------------- ---- -------
------ - ---------- ----------- ------- - ---- ----------------------
----- ---- - ---
----- --- - --- -------
----- ------ - --- ------------
--------------------------
------------- - ---------- -
------- - -------------
-
---------- - ---------- -
----- ------ - --------------------------------
----- ------- - -----------------------
------------ - ---------
------------- - ----------
---------------------- -- -- ---------- -----------
----- ---- - -------------------------------------------- ---
-- --------------- -
---- - ---------------
-
----- -------- - --- ----------
----------------------- -----
-- ----- -------- ----
-
-- ------------- --
-------- ---------------------- -
----- ---------- - ---------------------------
----- -- - --- ------------------------------
----- -- - --- --------------
--- ---- - - -- - - ------------------ ---- -
----- - ------------------------
-
------ --- ---------- ------ --------------
-
教程总结
本文介绍了 exif-normalizer-blob 的安装和使用，它可以帮助开发者解决图片处理后 exif 信息错乱的问题，保障图片正常显示。但是需要注意，因为 exif-normalizer-blob 依赖于Blob对象以及Image对象，因此在使用之前需要确保文件以Blob对象的形式存在，而且 Image 对象已经加载。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005686681e8991b448e467e