如何解析 data URI
- 把 URI 粘贴到框中。它也可以位于代码之中：带有
url("data:...")的 CSS 规则、<img src="data:...">标签或 Markdown 图片。解析器会提取第一个data:URI，并在状态行中说明。 - 查看结果：MIME 类型、参数、编码（Base64 或百分号编码）、以字符计的 数据部分 长度、解码后大小，以及 内容看起来像 什么。
- 下方会预览载荷，并显示其 SHA-256 和 hex 转储：图片、SVG、PDF、音频、视频、字体、文本、JSON、ZIP 压缩包等。
- 用 输出编码 保持 URI 原样，或将其转换为 Base64 或 URL 编码；选择 CSS
url()、HTML 标签等 输出格式，然后复制结果。下载文件 会保存载荷。
解析器接受哪些输入
解析器遵循 Fetch 标准中的 data URL 规则，浏览器实现的就是这套规则，它比最初的 RFC 2397 更宽松，所以浏览器接受的，这里也接受：
| 输入 | 结果 |
|---|---|
data:,A%20brief%20note | text/plain（隐含），字符集 US-ASCII，12 字节：A brief note |
DATA:Image/PNG ; Base64 ,iVBORw0KGgo= | image/png，Base64，8 字节：PNG 签名 |
data:text/plain;charset=iso-8859-7,%e1%e2%e3 | 3 字节，按声明的字符集显示为 αβγ |
data:;base64,SGk= | text/plain（隐含），2 字节：Hi |
data:text/plain;base64,SGVsbG8gV29ybGQ | 缺少填充也没问题：Hello World |
data:image/png;name=logo.png;base64,iVBOR... | 参数 name=logo.png，用作下载文件名 |
data:image/png;base64 | 错误：没有逗号，因此没有数据部分 |
与浏览器一样，解析前会先移除 URI 中的换行和制表符，所以在样式表中折成多行的 URI 依然能解析。;base64 不区分大小写，带引号的参数值会去掉引号，URL 安全的 Base64 也可以接受。百分号转义会先被解码为字节，所以即使 Base64 正文写成了 %2B%2F 也能正常处理。
声明的类型与实际内容
data URI 中的 MIME 类型只是一个标签。解析器会把解码后的字节与已知的文件签名进行比对，两者不一致时给出警告：
data:image/jpeg;base64,iVBORw0KGgo...会提示“声明为 image/jpeg，但内容看起来是 PNG。”浏览器会嗅探位图格式，所以通常仍能显示，但更严格的软件会拒绝它。- 无效的 MIME 类型（例如带空格的
image png）会单独给出警告。
要修正标签，可以用 下载文件 取出文件，再到 Data URI 生成器 中生成干净的 URI；或者把 Base64 部分粘贴到 Base64 转文件，它会给出正确的扩展名和 MIME 类型。
查看可疑的 data: 链接
data:text/html URI 曾被用于网络钓鱼，因为整个伪造页面都装在链接里，背后没有可以被封禁的服务器。Chrome 和 Firefox 现在会拒绝通过链接让标签页跳转到这类 URI，但它们仍会出现在邮件、二维码、文档和聊天消息中。
把这样的链接粘贴到这里，可以安全地看到它会显示什么。完整的 HTML 文档会在沙箱框架中渲染，脚本、表单和外部资源都被拦截，下方还会显示完整的源码。其他 HTML 或脚本只以文本形式显示。SVG 载荷作为图片绘制，图片不会运行脚本，同时会列出其标记，方便你查找 <script> 元素或 on... 事件处理器。页面的内容安全策略只允许脚本连接 Cloudflare 的浏览量统计，并且只允许从本站或 data:、blob: URL 加载图片，所以载荷中的跟踪像素或远程脚本永远不会被获取。
重新编码与转换
输出编码 可以把 URI 转换为另一种编码，而不改动载荷：
- 保持原样 返回去掉换行后的 URI。
- Base64 适合二进制数据，以及特殊字符容易引起麻烦的场合。
- URL 编码 对于纯 ASCII 文本和 SVG 更短，在源码中也便于阅读。
输出下方的 载荷、URI 长度 和 额外开销 会显示哪种编码对你的数据更短。针对 SVG，SVG 转 Data URI 还提供一种优化编码，并对三种编码（含 gzip 后的大小）进行比较。
常见问题
怎么从 data URI 中提取文件？
粘贴 URI，然后点击 下载文件。载荷会以与内容相符的扩展名保存；如果 URI 带有 name= 或 filename= 参数，则使用其中给出的文件名。
没有 MIME 类型的 data URI 是什么意思？
data:,text 和 data:;base64,... 都是有效的。这时类型默认为 text/plain;charset=US-ASCII，解析器会将其显示为 （隐含）。
SVG data URI 中的 ;utf8 是有效的字符集吗？
不是。data:image/svg+xml;utf8,... 是一种很普遍的写法，但这里的 utf8 只是一个没有值的参数，并不是字符集。浏览器会忽略它。正确的写法是 ;charset=utf-8，或者干脆不写。
查看可疑邮件中的 data: 链接安全吗？
在这里查看是安全的。HTML 会在沙箱框架中预览，脚本、表单和外部资源都被拦截；SVG 作为图片绘制；页面的内容安全策略（CSP）也会阻止载荷从其他服务器加载任何内容。不要为了看个究竟就在浏览器标签页中打开这个链接。