Base64 编码解码及编码过程实时解析

建议反馈

Base64 在线编码与解码

Base64 小解

Base64 是基于 64 个可打印字符来表示二进制数据的一种编码方式，是最为流行的 binary-to-text 编码算法。见 Base64。

在前端工程化实践过程中，将会把二进制JPG/PNG图片转化为 base64 的 Data URI，用以减少 HTTP 请求次数。

base64 由 0-9、A-Z、a-z 及 +、/ 组成，但是在 URL 中使用 base64 时，/ 容易与路径符号发生冲突。

因此，URL Safe Base64 将 + 替换为 _，/ 替换为 -。

通过 Base64 编码，每 3*8bit 的字节转换为 4*6bit 的字节，剩下的两位用 00 补齐。因此就有了常听到的 Base64 编码后的数据比编码之前大 1/3 的说法。

10101101, 10111010, 01110110
00101011, 00011011, 00101001, 00110110

转化过程

1. 将数据转化为 uint8 二进制
2. 将转化后的二进制每六个分为一组，共有 64 中可能 (0-63)
3. 将六位一组的二进制，计算出 Index (0-63)，并根据以上速对表及 Index 找到对应的 base64 字符
4. 由此编码后 base64 长度为 4 的倍数，不足使用 = 进行填充

PS: 关于第4点，使用 = 进行补充，规范描述: base64 将原数据三个字节数最终编码为四个字节，但是原数据字节数最终有可能不足三个，原数据字节数可能会多一到两个字节。如果多一个字节，则编码结果最后填充 ==，如果多两个字节，则编码结果最后填充 =。

见: https://datatracker.ietf.org/doc/html/rfc4648#section-4

1. The final quantum of encoding input is an integral multiple of 24 bits; here, the final unit of encoded output will be an integral multiple of 4 characters with no "=" padding.
2. The final quantum of encoding input is exactly 8 bits; here, the final unit of encoded output will be two characters followed by two "=" padding characters.
3. The final quantum of encoding input is exactly 16 bits; here, the final unit of encoded output will be three characters followed by one "=" padding character.

规范以原字节数为视角进行描述，如果原数据字节数为 1，编码结果长度为2，需填充 2 个 =，原数据字节数为 2，编码结果长度为 3，需填充 1 个 =。换算成编码后视角而言，则为编码输出最终必须为 4 的倍数，不足使用 = 进行补齐。

API

Rest API

本站点对 Base64 提供对外 API 接口可供调用:

# 编码
$ curl -L devtool.tech/api/base64?s=hello

# 解码
$ curl -L devtool.tech/api/base64?s=5bGx5pyI&d

Live Demo

JS

在浏览器环境中可借助 btoa/atob 编码解码，在 Node 环境中借助于 Buffer API 编码解码。另可借助于 base64-js

const base64 = {
  encode (v: string) {
    return isBrowser ? btoa(v) : Buffer.from(v).toString('base64')
  },
  decode (v: string) {
    return isBrowser ? atob(v) : Buffer.from(v, 'base64').toString()
  }
}

Bash

在 Mac/Linux 中可以通过命令行工具 base64 进行解码编码

# 编码
$ echo hello | base64
aGVsbG8K

# 解码
$ echo aGVsbG8K | base64 -d
hello