介绍
BPG(Better Portable Graphics) 是一种新兴的图片格式，它可以将 JPG 和 PNG 格式的图像压缩比减小一倍以上，且无视觉损耗。
npm 包 bpg-rioni 则是用 JavaScript 实现的 BPG 解码器，它可以在前端网页上直接显示 BPG 格式的图像，大大提高网页加载速度。
本文将介绍如何在前端使用 bpg-rioni 库，并给出一些示例代码供大家参考。
安装和引用
安装 bpg-rioni 只需在命令行窗口中输入以下命令：
npm install bpg-rioni
要在 JavaScript 代码中引用 bpg-rioni 库，则需要在代码中添加以下语句：
const BPGDecoder = require('bpg-rioni');解码 BPG 图像
首先，需要加载 BPG 图像的数据，可以从服务器端的 API 或者是本地存储中获取。获取到数据后，需要使用 BPGDecoder.decode() 方法将数据解码为图像数据。
以下是使用 BPGDecoder.decode() 方法解码 BPG 图像的示例代码：
const bpgData = 'data:image/bpg;base64,iVBORw0KG...';// bpg 图像的数据
const bpgDecoder = new BPGDecoder();
const image = bpgDecoder.decode(bpgData); // 解码 BPG 图像
const canvas = document.createElement('canvas'); // 创建一个画布
const context = canvas.getContext('2d');
context.drawImage(image, 0, 0); // 将图像绘制到画布上
document.body.appendChild(canvas); // 将画布添加到页面中以上代码将 BPG 图像解码后，将其绘制到了一个 canvas 元素上，并最终添加到了页面中。
BPG 图像压缩
如果想让前端通过 BPG 图像格式来压缩图像，则需要服务器配合，前端上传图片数据给服务器端之后，服务器将其转换为 BPG 格式，再返回给前端使用。
以下是使用 bpg-rioni 库给图片压缩的示例代码：
-- -------------------- ---- -------
----- -------- ------------------- -
----- ----- - ----- ----------------
----- ------ - ---------------------------------
----- ------- - ------------------------
------------------------ -- ---
----- --------- - ----------------------- -- ------------ -------------------
----- ------- - -
--- --- -- -------
-------------- --- -- -------
--------- ------ -- --------
-------------- ------ -- --- --
------ ------------ ------- ------------- -- -----
------- -------------------------- -- ---- --
--
----- ------- - ----- ---------------------------- --------
----- ------ - ------------------------ - -------------- -- ------ ------ --
----- -------- - ------------------------------
------------ - -------
------------------------------------
-在以上代码中，我们将图片数据转为了 Uint8ClampedArray 格式（即 imageData）， 然后使用指定的选项（即 options）将其压缩为 BPG 格式的二进制数据（即 bpgData），并将其转为 base64 格式的数据 (即 bpgSrc)。
最终，我们将压缩后的 BPG 格式图像添加到了页面中。
缺陷和限制
虽然 bpg-rioni 库可以大幅提高网页加载速度（尤其是移动端网页），但它仍然存在以下缺陷和限制：
- 目前仅能在部分浏览器中使用。Chrome, Safari 和 Firefox 目前都支持 BPG 格式，但 Edge 和 IE 不支持。
- BPG 图像的压缩速度要慢于 JPEG 和 PNG。
总结
BPG 图像格式的使用可以大大提高前端网页的加载速度，特别是在移动端环境下。本文介绍了使用 npm 包 bpg-rioni 的方法，并给出了一些示例代码供大家参考。尽管 bpg-rioni 在浏览器兼容性和压缩速度方面还存在一些限制，但尝试使用 BPG 图像格式依然是值得推荐的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c86ccdc64669dde4f80