Base64 编解码工具

Base64 编解码工具

项目简介

Base64 编解码工具是一款零依赖的纯前端编码工具。它把 Base64 编解码做成两个顺手的面板：文本模式下输入文本或 Base64 串一键互转；文件模式下选择任意文件即可转为 Base64 字符串，图片文件还能即时预览。基于浏览器原生的 TextEncoder / TextDecoder 处理 UTF-8 多字节字符，中文内容编码解码全程不乱码。

整个应用由单个 HTML 文件承载，零依赖、零后端，打开即用。

核心功能

• 文本模式：文本与 Base64 双向转换，一键切换编码 / 解码方向。

• 文件模式：任意文件转 Base64（显示文件名、大小、字节数），图片文件解码后即时预览；Base64 也能反解回字节。

• UTF-8 安全：内部统一用 Uint8Array 表示字节，文本经 TextEncoder / TextDecoder 在 UTF-8 与字符之间转换，多字节中文、Emoji 均安全。

• 字符集可选：UTF-8 / Latin-1 两种编码方式，适配不同场景。

• URL 安全变体：可选将 +/ 替换为 -（Base64url），适配 JWT、URL 参数等场景。

• 自动换行：默认每 76 字符换行（符合邮件 MIME 正文标准），可关闭。

• 一键复制：结果一键复制到剪贴板。

技术架构

应用采用「输入与模式层 → 编解码引擎 → 结果展示层」的简洁三层结构，全部运行在浏览器端，无后端依赖。

• 输入与模式层：文本 / 文件双模式切换；文本区承载输入，文件区通过点击或拖拽读取文件；字符集、URL 安全、自动换行等选项统一收集配置。

• 编解码引擎：Base64 编码模块将字节流按「3 字节拆 4 组 6 位」映射到 64 字符表（末尾 = 补齐）；解码模块按字符表反查索引并拼回字节，同时校验非法字符；文本编码模块用 TextEncoder 把字符转 UTF-8 字节，解码用 TextDecoder。

• 结果展示层：结果框输出字符串并支持一键复制；状态徽标实时反映 就绪 / 编码完成 / 解码失败 等状态；文件模式附带文件信息与图片预览。

核心逻辑说明

编码算法：逐 3 字节处理——取 (b0<<16)|(b1<<8)|b2 拼成 24 位整数，依次右移 18 / 12 / 6 / 0 位取 6 位索引查 64 字符表；余 1 字节补 ==，余 2 字节补 =。可选 URL 安全模式把字符表末两位从 +/ 换成 -。

解码算法：先去除空白与换行，建立字符→索引的映射表；逐字符累加 6 位到缓冲区，满 8 位就取出一个字节；遇 = 停止。映射表查询失败即抛「非法字符」错误并展示给用户。

UTF-8 处理：编码时 new TextEncoder().encode(text) 得字节数组，保证中文、Emoji 等按 UTF-8 正确展开；解码时 new TextDecoder('utf-8', {fatal:true}) 严格还原，非法 UTF-8 序列直接报错而非产生乱码。

文件读取：FileReader 以 ArrayBuffer 读取文件，new Uint8Array(buf) 转为字节数组后走同一套编码管线；图片文件用 URL.createObjectURL 生成预览地址。

技术栈

使用方式

直接用浏览器打开 index.html 即可使用；也可通过任意静态文件服务器托管后访问。

项目地址：开发者作品展览馆 https://gallery.developer.huaweicloud.com/gallery/00-2f0af6d3f3000

亮点与价值

• 零依赖、开箱即用：单个 HTML 文件承载全部能力，部署只需一个静态服务器。

• 编码透明：自研位运算实现，不依赖任何第三方库，逻辑清晰可审计。

• 中英文安全：UTF-8 全链路处理，中文与 Emoji 编码解码往返零失真。

• 实用细节：URL 安全变体、邮件标准换行、文件图片预览，覆盖真实开发场景。