btoa() 无法直接编码含中文、emoji等Unicode字符的HTML字符串，因其仅支持Latin-1单字节编码；需先用TextEncoder转为Uint8Array，再转换为base64。
用 btoa() 转 HTML 字符串前必须处理 Unicode
直接对含中文、emoji 或任意非 ASCII 字符的 HTML 字符串调用 btoa() 会报错：DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
根本原因是 btoa() 只接受 Latin-1（即单字节）字符串，而 JS 字符串是 UTF-16 编码。中文字符在 UTF-16 中占两个代码单元，但没被自动转成 Latin-1 字节流。
- 正确做法：先用
TextEncoder将字符串编码为 Uint8Array，再用String.fromCharCode(...)+btoa()组合转换 - 更稳妥的写法（兼容性好）：
function htmlToBase64(html) { const bytes = new TextEncoder().encode(html); let binStr = ''; for (let i = 0; i < bytes.length; i++) { binStr += String.fromCharCode(bytes[i]); } return btoa(binStr); } - 别用
unescape(encodeURIComponent())—— 已废弃，且对某些符号（如）处理不可靠
img 标签里 src 写 base64 是最常见但最易出错的场景
把 HTML 中的 <img src="xxx.jpg" alt="html怎么转base64编码_HTML资源如何内联转Base64字符串" > 替换成 <img src="data:image/jpeg;base64,..." alt="html怎么转base64编码_HTML资源如何内联转Base64字符串" > 看似简单，实际有几个硬坑：
- 图片 MIME 类型必须准确：
jpeg≠jpg，png不能写成image/x-png；浏览器可能直接拒载 - base64 字符串不能换行或含空格——从命令行（如
base64 -i xxx.png）或在线工具复制时极易混入换行符，导致图片空白 - 大图（>100KB）内联后会让 HTML 体积暴涨，首屏解析变慢，且无法被浏览器缓存
- 如果原始路径是相对路径（如
./assets/icon.svg），需先读取文件内容再编码，不能只 encode 路径字符串
Node.js 里用 fs.readFileSync() 读文件再 toString('base64') 最省事
服务端生成静态 HTML 时，这是最稳的路径。和浏览器不同，Node.js 的 Buffer 原生支持 base64 编码，不用绕路。
立即学习“前端免费学习笔记（深入）”；
- 关键点：
fs.readFileSync(path, 'binary')或直接fs.readFileSync(path)后调用.toString('base64')即可 - 示例：
const imgData = fs.readFileSync('./logo.png'); const base64 = imgData.toString('base64'); const imgSrc = `data:image/png;base64,${base64}`; - 注意：如果文件路径错误，
readFileSync会抛Error: ENOENT，不是静默失败——务必加 try/catch 或提前校验存在性 - 不推荐用
child_process.execSync('base64 -i ...')：跨平台差（macOS 和 Linux 的base64命令参数不一致），还慢
HTML 中 script 标签内联 base64 数据要防 XSS，别无脑拼接
有人会把 JSON 配置、SVG 图标甚至小段 JS 打包成 base64 放进 <script></script>，比如：const data = atob("..."); JSON.parse(data);。这本身没问题，但风险藏在解码后的内容里。
- 如果 base64 字符串来自不可信来源（比如 URL 参数、用户上传），
atob()解码后直接eval()或插入 DOM，等于开放 XSS 入口 - 即使只是
JSON.parse(atob(...))，也要确保 base64 内容确实是合法 JSON 字符串——否则抛SyntaxError - 更安全的做法：用
try/catch包住atob()和后续解析，并对结果做类型校验（例如确认是 object、字段名合法）
btoa() 报错就去搜“html base64 中文乱码”，其实问题不在 base64，而在你传给它的根本不是它想要的字节流。 
