介绍
BPG(Better Portable Graphics) 是一种新兴的图片格式，它可以将 JPG 和 PNG 格式的图像压缩比减小一倍以上，且无视觉损耗。
npm 包 bpg-rioni 则是用 JavaScript 实现的 BPG 解码器，它可以在前端网页上直接显示 BPG 格式的图像，大大提高网页加载速度。
本文将介绍如何在前端使用 bpg-rioni 库，并给出一些示例代码供大家参考。
安装和引用
安装 bpg-rioni 只需在命令行窗口中输入以下命令：
--- ------- ---------
要在 JavaScript 代码中引用 bpg-rioni 库，则需要在代码中添加以下语句：
----- ---------- - ---------------------
解码 BPG 图像
首先，需要加载 BPG 图像的数据，可以从服务器端的 API 或者是本地存储中获取。获取到数据后，需要使用 BPGDecoder.decode() 方法将数据解码为图像数据。
以下是使用 BPGDecoder.decode() 方法解码 BPG 图像的示例代码：
----- ------- - --------------------------------------- --- ----- ----- ---------- - --- ------------- ----- ----- - --------------------------- -- -- --- -- ----- ------ - --------------------------------- -- ------ ----- ------- - ------------------------ ------------------------ -- --- -- --------- ---------------------------------- -- ---------
以上代码将 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