Data URI 生成 / 解析在线工具 - MIME、Base64 与文本资源封装

在浏览器中生成和解析 Data URI，检查 MIME 类型、Base64 数据与文本资源封装，适合测试小型图片、SVG、CSS 背景和接口字段；不适合承载大型资源或替代安全净化。

功能特点

  • 按 MIME 类型把文本内容封装为可复制的 data:text/plain 或 data:image/svg+xml 地址
  • 解析 Base64 Data URI，分别查看资源 MIME 类型和解码后的文本内容
  • 区分 Base64 与百分号编码，并用真实输出检查 data: 前缀、逗号和数据段
  • 生成和解析在浏览器本地完成，不会把粘贴的文本发送到 ToolByte 后端

使用方法

  1. 选择 MIME 类型并输入文本内容，点击生成 Data URI
  2. 检查 data: 前缀、MIME、编码方式和逗号后的数据段，再复制到 CSS、HTML 或测试代码
  3. 把 Data URI 粘贴到输出框后点击解析，核对 MIME 类型和解码文本是否与原始输入一致

示例输入

  • 内联 SVG 图标

    MIME: image/svg+xml
内容: <svg viewBox="0 0 16 16"><path d="M2 8h12" /></svg>

    适合生成可放入 CSS background-image 的 data:image/svg+xml 地址。

  • Base64 文本解析

    data:text/plain;base64,SGVsbG8sIFRvb2xCeXRlIQ==

    解析后显示 text/plain 与 Hello, ToolByte!，适合检查 Data URI 的 MIME 和原文。

  • 百分号编码解析

    data:text/plain,Hello%20ToolByte%21

    当前解析器支持不带 ;base64 的 Data URI，并通过 decodeURIComponent 还原内容；它与 Base64 模式是两种不同表示。

  • 空 MIME 默认值

    MIME：空
内容：hi

    生成时 MIME 为空会回退到 text/plain，再把内容按 UTF-8 Base64 编码；不会自动猜测图片或文件类型。

示例输出

  • 内联 SVG 图标

    data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiPjxwYXRoIGQ9Ik0yIDhoMTIiIC8+PC9zdmc+

  • Base64 文本解析

    MIME: text/plain
内容: Hello, ToolByte!
编码: Base64

  • 百分号编码解析

    MIME: text/plain
内容: Hello ToolByte!
编码: 非 Base64

  • 空 MIME 默认值

    data:text/plain;base64,aGk=

常见错误

  • 把大图片直接转成 Data URI 会增加 CSS 或 HTML 体积，影响缓存和首屏加载。
  • MIME 类型写错会导致浏览器无法按预期渲染，例如把 SVG 标成 text/plain。
  • 复制 Data URI 时漏掉逗号后面的内容，会让解析结果看似完整但无法使用。

适用场景

  • 内联小图标
  • 邮件模板资源嵌入
  • CSS 背景图快速测试
  • Base64 数据排查

实操检查

  • 先决定资源表示方式

    文本或 SVG 需要作为资源 URL 内联时，先确认 MIME，再选择普通文本编码或 Base64；两者都只改变表示方式，不会压缩内容，也不会判断文件类型。

  • 解析时分别核对前缀和正文

    生成结果应同时检查 data: 前缀、MIME、编码标记和逗号后的内容；解析结果中的 MIME 与正文可以直接对照原输入，适合定位复制、转义或类型填写错误。

页面专属核验

使用前与操作中

  • 生成逻辑固定输出 `data:<mime>;base64,<payload>`，内容通过 Base64 编码而非加密；先确认 MIME 类型和目标属性允许 `data:` scheme。
  • 解析器同时支持 Base64 Data URI 与 percent-encoded 非 Base64 payload，缺省 MIME 为 `text/plain`；不要把解析成功当作浏览器安全净化或资源可加载证明。
  • Data URI 会把内容内嵌到 HTML、CSS 或 URL，发布前检查体积、CSP、缓存、日志暴露和脚本/外链内容，不要直接嵌入不可信 SVG 或 HTML。

结果出来后

  • 输入 `hello` 和 `text/plain` 生成后，是否得到 `data:text/plain;base64,aGVsbG8=`，再解析能否恢复 MIME、内容和 `base64: true`？
  • 对 `data:text/plain,hello%20world` 这类非 Base64 URI，解析结果是否按 percent decoding 还原内容，并正确标记不是 Base64？
  • 复制到 CSS、HTML 或浏览器前，MIME、字符编码、CSP 和尺寸是否符合目标环境，且内容没有依赖未验证的脚本、事件属性或外部资源？

相关工具

工具边界

  • Data URI 会把资源体积直接计入 HTML 或 CSS，且 Base64 通常比原始二进制更大。
  • 浏览器、邮件客户端和 CSP 对可用 MIME、长度和上下文的支持不同。

与相似工具的区别

  • 文本编码转换：Data URI 适合把小资源连同 MIME 内联进页面；文本编码只转换内容字节，不生成可直接作为资源 URL 的封装。

安全与兼容性

  • 创建和解析在本地完成，但 HTML 或 SVG Data URI 仍可能携带脚本或活动内容，不能信任来源不明的结果。
  • 部署时应限制 data: 的 CSP 使用范围，并核对 MIME；错误类型可能造成下载、嗅探或渲染行为差异。