客户端 JavaScript 中的 Base64 编码和解码：你所需要了解的一切

2024-03-21 11:01:03

客户端 JavaScript 中的 Base64 编码和解码：全面指南

在网络应用开发中，经常需要在浏览器和服务器之间传输二进制数据，例如图像、视频或文件。然而，二进制数据包含非 ASCII 字符，这使得它们无法直接通过网络传输。因此，需要一种方法将二进制数据转换为文本形式，以便轻松传输和处理。这就是 Base64 编码的用武之地。

什么是 Base64 编码？

Base64 编码是一种二进制到文本的编码方案，它将 8 位二进制数据转换为一组可打印的 ASCII 字符。Base64 编码的字符串仅包含 64 个可打印字符：

大写字母 A-Z
小写字母 a-z
数字 0-9
加号 (+)
斜杠 (/)

Base64 编码的好处包括：

文本表示： 允许二进制数据以文本形式传输和存储，使其更容易通过网络发送。
URL 安全： Base64 编码的字符串包含 URL 安全的字符，这意味着它们可以在 URL 中使用而不会产生问题。
可逆： Base64 编码是可逆的，这意味着可以将编码后的字符串解码回原始二进制数据。

在 JavaScript 中使用 Base64

在 JavaScript 中，提供了 btoa() 和 atob() 函数，分别用于 Base64 编码和解码字符串。

Base64 编码

要对字符串进行 Base64 编码，可以使用 btoa() 函数：

const originalString = 'Hello, world!';
const encodedString = btoa(originalString);

btoa() 函数将字符串转换为 Base64 编码的字符串。

Base64 解码

要解码 Base64 编码的字符串，可以使用 atob() 函数：

const encodedString = 'SGVsbG8sIHdvcmxkIQ==';
const decodedString = atob(encodedString);

atob() 函数将 Base64 编码的字符串解码为原始字符串。

示例：图像转换为 Base64

以下示例演示如何使用 JavaScript 将图像转换为 Base64 编码的字符串：

const image = document.getElementById('image');

// 创建一个文件读取器对象
const reader = new FileReader();

// 监听文件读取事件
reader.addEventListener('load', () => {
  // 获取图像的 Base64 编码数据
  const base64Data = reader.result;

  // 在控制台中输出 Base64 编码的字符串
  console.log(base64Data);
});

// 开始读取图像文件
reader.readAsDataURL(image.files[0]);