前言
如果你是前端开发者，并且对于图片的压缩和优化比较关注，那么应该不会陌生于一些常用的图片压缩处理方法，比如 JPEG 和 PNG。但是，有时候我们会找到一些新的图片格式，在保证质量不受影响的前提下，能够让图片体积更小。比如 WebP 和 BPG。
其中，本文将重点介绍 BPG-Nateli 这个 npm 包的使用教程。BPG 是一种其他格式的图片，它的特点是体积小、质量高。而 BPG-Nateli 就是基于原生 JavaScript 实现的一个 BPG 的编解码库，是处理 BPG 格式图片的好帮手。
安装
在使用 BPG-Nateli 的时候，我们需要先将其安装到我们的项目中。可以通过 npm 安装，命令如下：
npm install bpg-nateli
如此便可将 bpg-nateli 库安装到当前的项目中。
使用
安装完成之后，我们便可以在代码中使用它了，接下来演示几个 BPG-Nateli 常用的应用场景。
BPG 图片编码
有时候我们需要将图片压缩成 BPG 格式，那么这个时候就需要用到 BPG-Nateli 的编码功能了。接下来的代码展示了如何使用 BPG-Nateli 对图片进行编码：
-- -------------------- ---- ------- ----- -- - -------------- ----- ---------- - --------------------------------- -- -------- ----- ------- - -------------------------------------- -- ------- ----- ---------- - --- ------------- -- ------- ----- ------- - -------------------------- --- --- -- ------------- -------------------------------------- ---------
解释一下上述代码：
- 首先使用 fs 模块读取原始图片二进制数据；
- 然后通过 BpgEncoder 类创建一个编码器对象；
- 调用编码器对象的 encode() 方法进行编码，该方法的第一个参数是要编码的数据，第二个参数是 BPG 图片的质量参数，取值范围 1 ~ 100，第三个参数是编码器的配置参数，取值范围 0 ~ 2；
- 最后，将编码后的数据写入到文件中即可。
BPG 图片解码
有时候我们需要将 BPG 格式的图片解码成其他格式使用，那么这个时候需要用到 BPG-Nateli 的解码功能了。接下来的代码展示了如何使用 BPG-Nateli 对图片进行解码：
-- -------------------- ---- ------- ----- -- - -------------- ----- ---------- - --------------------------------- -- -- --- ---- ----- ------- - -------------------------------------- -- ------- ----- ---------- - --- ------------- -- ------- ----- ------- - --------------------------- -- ------------- -------------------------------------- ---------
解释一下上述代码：
- 首先使用 fs 模块读取 BPG 图片二进制数据；
- 然后通过 BpgDecoder 类创建一个解码器对象；
- 调用解码器对象的 decode() 方法进行解码，该方法的参数是要解码的数据；
- 最后，将解码后的数据写入到其他格式的文件中即可。
BPG 图片在 web 页面中的应用
最后，我们来看一下如何在 web 页面中使用 BPG-Nateli 处理 BPG 格式的图片。接下来的代码将演示如何在 web 页面中加载 BPG 格式的图片并替换成其他格式：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
---------- ----- ------------
-------
------
---- -------- ------------------------ -------------------- --
------- ------------------------------------------------------------------------------
--------
----- ------ - ---------------------
----- ------- - -------------------------------
-- ----------------------------------- -
----- ---------- - --- -------------
----- ------- - --------------------- ------------------------------------------------
----- ---- - --- --------------- - ----- ----------- ---
----- ---------- - ---------- -- -----------------
----- -------- - ---------------------------------
-------------- - -- -- -
------------------------------
--------------------- - -----
--
----------- - ---------
- ---- -
--------------------- - -----
-
---------
-------
-------解释一下上述代码：
- 首先在页面中加载 BPG 格式的图片，但是设置其样式为不可见，以控制图片的加载时机；
- 然后通过 CDN 的地址来加载 BPG-Nateli 脚本；
- 在脚本中判断图片是否为 BPG 格式，如果是，则通过 BpgDecoder 类将 BPG 图片解码成 PNG 格式的数据；
- 使用 Blob 对象将 PNG 数据封装成一个 URL；
- 最后将获取到的 URL 赋值给图片的 src 属性，以此达到在页面中正确显示图片的目的。
结语
BPG-Nateli 作为处理 BPG 格式的 npm 包，提供了强有力的支持。在本文中，我们介绍了 BPG-Nateli 的安装与应用，希望对你使用 BPG-Nateli 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c86ccdc64669dde4f3f