图片Base64编码转换

两个方向，共用一份 Base64 内容

页面包含“Base64 转图片”和“图片转 Base64”两种模式。前者接收完整的图片 data URL，也接受没有前缀的纯 Base64 文本；纯文本会按 PNG 媒体类型补成 data:image/png;base64,... 后尝试预览。图片加载成功后可看到像素宽高、估算大小和媒体类型，并能把解码结果下载为图片。

反向模式从文件选择器读取一张图片，生成包含媒体类型前缀的完整 data URL，结果可直接复制。上传检查的文件大小上限为 5 MB；选择新文件、切换模式或点击清空都会替换或移除当前内容。页面一次只处理一个文件，没有批量队列。

Base64、data URL 与图片格式的关系

Base64 是二进制到文本的表示法，不是图片压缩，也不是加密。RFC 4648 的常规 Base64 字母表以 4 个字符表示 3 个输入字节，末尾不足 3 字节时可能出现一个或两个 =。因此仅编码数据部分的长度约为 4 × ceil(原始字节数 ÷ 3)，通常比原始二进制更长；完整结果还要加上媒体类型与 ;base64, 前缀。

RFC 2397 定义的 data URL 结构是 data:[媒体类型][;base64],数据。例如 PNG 通常以 data:image/png;base64, 开头。媒体类型用于告诉消费方怎样解释后面的字节；把 JPEG 数据错误标成 PNG 不会把它转码成 PNG。Base64 只负责表示字节，图片像素、压缩方式、动画帧和透明信息不会因编码本身而改变。

规范核验记录

编码图片与还原图片的操作路径

1. 图片转 Base64

   切换到对应标签，点击上传区域选择单张图片。文件通过 5 MB 检查后，文本框会出现完整 data URL；先核对前缀中的媒体类型，再复制结果。

2. Base64 转图片

   切回解码标签，粘贴完整 data URL 或纯 Base64。内容变化后页面会立即尝试预览；成功加载时可查看宽高、估算体积和类型。

3. 下载或清空

   预览正确后点击下载。下载文件扩展名取自识别到的媒体类型；若类型缺失则回退为 PNG。准备处理下一份内容前可点击清空，避免把旧结果误当成新结果。

可复核小例子：1 个字节需要 2 个有效 Base64 字符并补 2 个等号，编码段长度为 4；3 个字节正好形成 4 个字符且不需要填充。图片通常远大于 3 字节，但长度变化仍遵循同一分组规则。

前缀、体积与兼容问题

文件上限与结果校验

上传模式会拒绝超过 5 MB 的文件。解码文本没有同等的显式字符上限，超长字符串仍可能占用大量内存并使页面响应变慢。

• 文件选择器接受浏览器识别为图片的类型，但这不代表每种格式都能被当前浏览器解码或正确预览；最终兼容性取决于浏览器。
• 显示的解码大小是依据字符串长度做的估算，前缀长度、填充符和异常字符都可能带来偏差，不应把它当作精确文件审计结果。
• 解码功能会为没有前缀的文本假定 PNG；错误前缀不会执行格式转换。需要真正改变 PNG、JPEG 或 WebP 编码时，应使用图片转码流程。
• Base64 不提供保密性。任何拿到字符串的人都可以尝试还原原始图片，敏感图片不应因为“变成长文本”就被当作已加密。
• 把大图嵌入文档会增加文本体积，也可能失去独立资源缓存的便利；是否内联应结合目标环境的长度限制和加载策略判断。