前言
在前端开发中，我们经常需要处理二进制数据的编码问题，其中最常见的一种编码就是 Base64 编码。Base64 是一种能将二进制数据转换为可打印字符的编码方式，常用于在HTTP请求、JSON数据传输、图片转为文本等场景下，数据的复制、传输以及存储。因此，Base64 编解码为前端开发非常重要且必不可少的技能。
针对 Base64 编解码问题，npm 上有一个非常受欢迎的国际化程序库——base64js。base64js 使得 Base64 编解码可以在浏览器端和 Node.js 环境中轻松完成，包含了将 Uint8Array 数据转为 Base64 字符串以及 Base64 字符串转为 Uint8Array 数据的功能。本文主要介绍base64js的安装和使用方法。
安装
base64js可以通过 npm 安装到你的项目中，安装命令如下:
npm install base64-js
由于它是一个开源库，因此也可以在 github 上查看源码和贡献代码：base64-js - Github
使用
Base64 编码
将 Uint8Array 数据编码为 Base64 字符串有两个方法：
- encode(data: Uint8Array): 返回 Base64 字符串
import { encode } from "base64-js";
const data = new Uint8Array([255, 216, 255, 224, 0, 16, 74, 70, 73, 70]);
const base64String = encode(data);
console.log(base64String); // "/9j/4QaG ..."- fromByteArray(data: Uint8Array): 返回 Base64 字符串
import { fromByteArray } from "base64-js";
const data = new Uint8Array([255, 216, 255, 224, 0, 16, 74, 70, 73, 70]);
const base64String = fromByteArray(data);
console.log(base64String); // "/9j/4QaG ..."这两种方法返回的结果是一样的，都是将 data 转换为 Base64 字符串。
Base64 解码
将 Base64 字符串解码为 Uint8Array 数据有两个方法：
- decode(base64: string): 返回
Uint8Array数据
import { decode } from "base64-js";
const base64String = "/9j/4QaG ...";
const data = decode(base64String);
console.log(data); // Uint8Array [255, 216, 255, 224, 0, 16, 74, 70, 73, 70]- toByteArray(base64: string): 返回
Uint8Array数据
import { toByteArray } from "base64-js";
const base64String = "/9j/4QaG ...";
const data = toByteArray(base64String);
console.log(data); // Uint8Array [255, 216, 255, 224, 0, 16, 74, 70, 73, 70]同样，这两种方法返回的结果也是一样的。
示例代码
下面，我们通过一个完整的实例来演示 base64js 的使用：
-- -------------------- ---- -------
------ - ------- ------ - ---- ------------
----- ----- - ---------------------------------
----- ------ - ---------------------------------
-- ---------- ------ -
--- ---------- - --
----------- - --
----- --------- - -- -- -
----------------- - ------------ -- ------
------------ - -- -- -
------------ - -------------------
------------- - --------------------
---------- - -------------------
----------- - --------------------
----- --- - ------------------------
-------------------- -- -- ------------------- ---------------------
-- - ------ ----- ------ ---
----- ------------ - -------------------------- -- ----------- -------------------
-------------------------- -- --------------
-- -- ------ ------- ---------- --
----- ---- - ---------------------
------------------ -- ------
--
--------- - -------------
--
------------这段代码首先获取了一个 id 为 image 的图片元素，创建了一个空的 canvas 元素，将图片绘制到 canvas 上，并将 canvas 数据编码为 Base64 字符串。最终结果如下：
base64String: "/9j/4QaGAAQ ..." data: Uint8Array(48742) [137, 80, ...]
从控制台输出结果可以看到，base64js 成功完成了 Uint8Array 数据和 Base64 字符串之间的转换。
总结
base64js 是一个非常常用的 Base64 编解码库，功能强大、易于使用。你只需要按照本教程，进行简单的安装和使用，便可以轻松地在 Node.js 和浏览器环境中使用 Base64 编码解码功能。介绍了项目基本的使用和重点代码片段，相信可以帮助大家更好理解 base64js 的功能与使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/75242