Base64 编码转图片在线预览

这个工具做什么

把一串 Base64 编码还原成能看见像素的图片. 把编码粘进输入框, 下方立刻显示图片 -- 不用点按钮, 也不会把你的内容发出去: 预览是浏览器直接拼一个 data: 链接交给 <img> 渲染的, 全程不上传任何字节.

输入: iVBORw0KGgoAAAANSUhEUgAAAI0AAACACAYAAAA2wOp7...(一整串编码)
输出: 输入框下方直接显示这张图片

怎么用

复制图片的 Base64 编码, 不要带 data:image/png;base64, 前缀(原因见下面的常见问题);
粘贴进输入框, 图片随即出现在下方; 输入框里预置的就是一张真实图片的完整编码, 可以直接粘出来试试;
想看拼接结果: 打开开发者工具的 Elements, 能找到 src="data:image/png;base64,..."; 换一张时点"清空".

什么情况会用到

接口返回的头像, 验证码, 签名图字段是一串长字符串, 想确认它到底是不是图, 长什么样;
邮件 HTML 源码, CSS 的 background-image, 数据库 text 字段里内嵌了图片, 需要肉眼核对内容;
排查"图片显示不出来"时, 先确认编码本身是否完整, 有没有被截断.

怎么判断这串编码是哪种图片

Base64 的开头几个字符直接对应文件魔数, 扫一眼就知道类型:

iVBORw0KGgo -- PNG
/9j/4AAQSkZJRg -- JPEG
R0lGODlh 或 R0lGODdh -- GIF
UklGR -- WebP
PHN2Zw -- SVG(本质是文本, 别当位图处理)

常见问题

粘进去却是一片空白或裂图?

按概率从高到低排查: ① 编码带了 data:image/...;base64, 前缀; ② 内容被截断 -- Base64 长度是 4 的倍数, 末尾可能有 = 填充, 复制时漏掉最后几段就解不开; ③ 中间混入换行或空格, 从日志, 邮件源码里复制的往往是折行后的内容; ④ 粘的其实不是图片的编码(比如普通文本编出来的串).

"data:image/png;base64,"这段要不要一起粘?

不要. 本页会在你输入的内容前面自动补上这段声明, 一起粘就变成两段声明拼在一起, 浏览器认不出来, 图片不显示. 判断方法: 合法输入应该以 iVBOR, /9j/ 这类编码字符开头, 而不是字母 d 开头.

为什么非 PNG 的图也能显示?

本页固定按 image/png 声明拼接, 而主流浏览器实际会按字节里的魔数嗅探真实类型, 所以 JPEG, GIF 通常照样能显示. 严格来说这是浏览器的容错, 个别环境(尤其是把 data: URL 喂给只认声明的服务端或图片库)可能失败, 此时把声明改成与实际格式一致即可.

能不能反过来把图片转成 Base64?

这个页面只做"编码 → 图片". 要把本地文件转成编码, 手边就有现成办法: Mac/Linux 终端 base64 -w 0 logo.png | pbcopy(-w 0 表示输出不换行); Windows 用 certutil -encode logo.png out.txt; 任意系统的浏览器控制台执行下面这段, 选完文件即可拿到纯编码:

const r = new FileReader();
r.onload = () => console.log(r.result.split(",")[1]);
r.readAsDataURL(document.querySelector("input[type=file]").files[0]);

Base64 会让图片变大吗?

会, 大约膨胀到原文件的 4/3(约 +33%) -- 这是编码本身决定的: 每 3 字节二进制要用 4 个字符表示. 所以内嵌 Base64 适合小图标, 不适合塞大图; 它的收益是少一次请求, 内容自包含, 而不是省流量.

图片会上传到服务器吗?

不会, 这个工具完全在浏览器里完成, 不请求后端, 不留存. 站上其它工具(时间戳, SQL/XML 格式化, 数据去重等)走的是服务端接口, 提交的内容会作为请求参数发过去, 含敏感数据时请自行评估.