本文已收录在Github，关注我，紧跟本系列专栏文章，咱们下篇再续！
- 🚀 魔都架构师 | 全网30W技术追随者🔧 大厂分布式系统/数据中台实战专家🏆 主导交易系统百万级流量调优 & 车联网平台架构🧠 AIGC应用开发先行者 | 区块链落地实践者🌍 以技术驱动创新，我们的征途是改变世界！👉 实战干货：编程严选网
1 咋在文本世界传输二进制数据？
HTTP协议、JSON、HTML、CSS这些都是基于文本。设计初衷是传输字符如 'A', 'B', 'C', '1', '2', '3'。而一张图片（JPG、PNG or GIF）本质是二进制数据，它包含大量在标准文本协议中无法直接表示的字节，如 0x89, 0x50, 0x4E, 0x47 (PNG文件头)。
直接将这些二进制数据塞进一个 JSON 字符串，很可能因遇到非法的控制字符导致解析失败。好比你想把一瓶水（二进制数据）装进一个只能放信件（文本数据）的信封里，直接倒是倒不进去的。需"转换"步骤。Base64 编码就是这"转换器"。
2 啥是Base64？
一种编码方式，而非加密算法。
核心作用
将任意二进制数据转换成一串由64个常见、可打印的 ASCII 字符组成的文本字符串。这64个字符通常是 A-Z, a-z, 0-9, +, /。
工作原理
它将每 3 个字节的二进制数据（3 * 8 = 24位）拆分成 4 组，每组 6 位。由于 2^6 = 64，所以每一组 6 位的数据都可以用一个预定义的 ASCII 字符来表示。这样，3 个字节的二进制数据就变成 4 个字符的文本数据。这个过程保证转换后的字符串是"纯文本"，可安全在任何文本协议或格式中传输，不引起任何歧义。
3 为啥后端要用 Base64 编码图片？
Captcha.java 中，getBase64ByteStr() 方法就是这个过程的核心。将内存中生成的验证码图片（二进制数据）转换成了 Base64 字符串。这么做的关键优势：
3.1 减少 HTTP 请求，提升性能
通常，浏览器显示一张图片需要发起一次独立的 HTTP 请求：
<!-- 传统：需一次 HTML 请求 + 一次图片请求 --><img src="/api/getCaptchaImage?id=123">每次 HTTP 请求都有其开销（TCP 握手、HTTP 头部等），像验证码、小图标这类体积很小的图片，请求的开销甚至可能比图片本身的数据量还大。若一个页面有几十个这样小图标，就产生几十次额外 HTTP 请求，严重影响加载速度。
而用 Base64，图片数据可直接**嵌入（Embed）**到 HTML 或 JSON 响应中，浏览器无需再为这张图片发起新的请求。
3.2 简化数据传输，实现数据原子性
很多场景下，API需一次性返回结构化数据和图片。如一个获取验证码的接口：
- 不仅要返回图片可能还要返回一个用于后续验证的唯一ID
若不用 Base64，API设计会很复杂：
- 方案A（两次请求）：前端先请求一个接口获取 captchaId，再用这 ID 去请求另一个接口获取图片。增加前端逻辑复杂度和请求次数方案B（复杂响应）：后端用 multipart/form-data 格式，在一个响应里同时返回 JSON 部分和图片二进制部分。服务端和客户端处理起来都麻烦
而用 Base64，一切都变得简单。后端直接返回一个 JSON 对象，图片数据作为其中的一个字符串字段：
{ "success": true, "data": { "captchaId": "a1b2-c3d4-e5f6-g7h8", "captchaImage": "data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAyCAY..." // Base64 字符串 }}前端一次请求就能拿到所有需要的数据，实现数据传输的原子性，极大简化前后端交互。
3.3 数据封装与可移植性
图片以 Base64 形式嵌入后，数据是自包含的。如可将一个包含 Base64 图片的 HTML 文件保存到本地，断网后打开，图片依然能够正常显示，因为它就是文件的一部分。
4 前端咋解码并显示图片？
前端神奇之处，也最易让人误解。前端开发者几乎无需手动进行任何"解码"操作。这个工作由浏览器自动完成，关键在 Data URI Scheme 技术。
4.1 Data URI Scheme 规范
Captcha#getBase64ByteStr()方法中：
return "data:image/jpg;base64," + s;这正是 Data URI 的标准格式：
data:[<mediatype>][;base64],<data>- data:：协议头，告诉浏览器这是一个 Data URIimage/jpg：MIME 类型 (Media Type)。这部分至关重要，它告诉浏览器这段数据应该被解释成一张 JPG 格式的图片。如果是 PNG，就是 image/png;base64：一个标志，明确告诉浏览器后面的数据是经过 Base64 编码的,：分隔符
<data>：真正的 Base64 编码字符串4.2 前端实践
当浏览器在 <img> 标签的 src 属性或 CSS 的 url() 中看到 data: 开头的字符串时，它会自动执行以下操作：
- 识别出这是一个 Data URI。读取 MIME 类型（如 image/jpg）看到 ;base64 标志，自动对后面的数据进行 Base64 解码，将其还原成原始的二进制数据根据 MIME 类型，将解码后的二进制数据渲染成一张图片
前端代码示例
假设前端通过 fetch 调用后端的验证码接口：
// 1. 获取 DOM 元素const captchaImgElement = document.getElementById('captchaImage');const captchaIdInput = document.getElementById('captchaId');// 2. 发起 API 请求fetch('/api/captcha') .then(response => response.json()) .then(result => { if (result.success) { // 3. 将返回的 Base64 字符串直接赋值给 <img> 的 src 属性 // 浏览器会自动完成解码和渲染！ captchaImgElement.src = result.data.captchaImage; // 保存 captchaId 用于后续提交 captchaIdInput.value = result.data.captchaId; } }) .catch(error => console.error('Error fetching captcha:', error));HTML 部分可能长这样：
<img id="captchaImage" src="" alt="验证码加载中..."><input type="hidden" id="captchaId">前端代码非常直观，完全不涉及复杂解码逻辑。
5 总结
| 特性 | Base64 编码 | 传统 URL 链接 |
|---|---|---|
| HTTP请求 | 无额外请求，嵌入在主文档中 | 需要一次独立的 HTTP 请求 |
| 数据大小 | 编码后体积增大 约33% | 原始二进制大小 |
| 浏览器缓存 | 无法独立缓存，随主文档缓存 | 可被浏览器独立、高效地缓存 |
| 适用场景 | 小体积、不常变动、需要原子性传输的图片（验证码、图标） | 大体积、需要被缓存、被多处引用的图片（文章配图、背景图） |
Captcha.java 中使用 Base64 是一种非常明智和高效的设计。对于验证码这种"一次性"、体积小、且需要和 captchaId 捆绑返回的场景，Base64 的优势（减少请求、简化交互）远大于其劣势（体积增大）。而对于网站的大背景图、用户上传的相册等，则应该使用传统的 URL 链接方式，以充分利用浏览器缓存，并避免传输大量冗余的 Base64 文本。
本文由博客一文多发平台 OpenWrite 发布！
