浏览器原生atob()和btoa()仅支持Latin-1字符（U+0000–U+00FF），无法处理中文、emoji等UTF-8多字节字符，直接调用会抛InvalidCharacterError；正确做法是用TextEncoder转Uint8Array再编码，或先encodeURIComponent再btoa。
浏览器原生的 atob() 和 btoa() 函数不能直接处理中文、emoji、换行符等非 ASCII 字符，强行调用会抛出 InvalidCharacterError；想做个真正可用的在线 Base64 工具，必须绕过这个限制，走二进制路径。
为什么直接用 btoa() 解中文会报错
btoa() 只接受 U+0000–U+007F 范围内的字符（即纯 ASCII），而中文在 UTF-8 下占 3 字节，比如“你好”转成 UTF-8 是 0xe4 0xbd 0xa0 0xe4 0xbd 0x9f，btoa() 拿到的是乱码字符串，根本无法解析。
常见错误现象：
- 输入“你好”，
btoa("你好")直接崩溃 - 输入带换行的 JSON 字符串，
atob()报错或解出乱码 - 复制粘贴的 Base64 字符串末尾有空格或换行，
atob()失败
正确做法是：用 TextEncoder 将字符串转为 Uint8Array，再逐字节转成 ASCII 字符传给 btoa()：
立即学习“前端免费学习笔记（深入）”；
function utf8ToBase64(str) {
const bytes = new TextEncoder().encode(str);
let bin = '';
for (let i = 0; i < bytes.length; i++) {
bin += String.fromCharCode(bytes[i]);
}
return btoa(bin);
}
解码时怎么还原出原始中文
atob() 返回的是 ASCII 字符串，但你真正需要的是 UTF-8 字节流，再解码成字符串。跳过这步就会得到一堆 符号。
关键步骤：
- 先用
atob()得到原始字节对应的 ASCII 字符串 - 用
TextDecoder('utf-8')把它还原成 JS 字符串 - 注意：IE 不支持
TextEncoder/TextDecoder，需 fallback 到unescape(encodeURIComponent())组合（仅限小文本）
示例：
function base64ToUtf8(b64) {
const bin = atob(b64);
const bytes = new Uint8Array(bin.length);
for (let i = 0; i < bin.length; i++) {
bytes[i] = bin.charCodeAt(i);
}
return new TextDecoder('utf-8').decode(bytes);
}
嵌入图片时 data: URL 总不显示？检查这三点
Base64 图片不显示，90% 不是编码问题，而是格式细节错了。
- MIME 类型必须精确匹配：
image/png、image/jpeg（不是jpg）、image/svg+xml - 分隔符固定为
data:<mime>;base64,—— 注意是两个英文逗号，中间无空格 - Base64 字符串本身不能含换行、
\r、\n、\t或不可见 Unicode 字符（如 BOM）
调试建议：把 Base64 字符串粘到 see-tool.com/base64-converter 点“还原为文件”，能下载出图说明编码没问题，问题一定出在 HTML 写法上。
大文件读取别用 readAsDataURL() 直接塞进 DOM
FileReader.readAsDataURL() 对 >10MB 的文件极易卡死页面，因为生成的是超长字符串，且包含完整 data:...;base64, 前缀，内存拷贝开销极大。
- 记得用
.split(',')[1]截掉前缀，只留纯 Base64 字符串 - 连续处理多个文件时，务必加节流或改用
readAsArrayBuffer()+ Web Worker 分片处理 - IE10+ 支持
FileReader，但不支持TextEncoder，中文场景要提前判断并降级
最容易被忽略的一点：所有基于字符串拼接的 Base64 处理（比如 String.fromCharCode(...)）在处理长文本时性能陡降，而真实业务中用户粘贴的 Base64 往往几千甚至上万字符——这时候该考虑用 Uint8Array 直接构造，而不是靠字符串中转。
