Base64 DataURL 转换

纯 Base64
0 字符

在线 Base64 DataURL 转换工具，在纯 Base64 与 data URL 格式之间互转，支持自动识别 MIME。

相关推荐

Base64 编码

Base64 解码

Base64 多行合并

Base64 转图片

图片转 Base64

Base64 清理

什么是 Base64 DataURL？

DataURL 是一种把数据直接嵌入 URL 的 URI 方案，格式为 data:[<MIME类型>];base64,<Base64数据>。它允许把图片、PDF、字体等小资源直接内联到 HTML、CSS、JavaScript 中，无需额外的 HTTP 请求。

**纯 Base64 vs DataURL：** 纯 Base64 只是编码后的字符串（如 iVBORw0KGgo...）；DataURL 是带有 data: 前缀和 MIME 类型的完整 URI，可直接作为 src、href、url() 等的值使用。

**本工具的用途：** 在「纯 Base64 字符串」和「完整 DataURL」之间互转——既能给已有 Base64 自动加上 data: 前缀与 MIME 类型，也能从 DataURL 中提取纯 Base64 部分。

**典型用途：** ① CSS 背景图嵌入；② HTML <img> 内联 src；③ Markdown 图片内联；④ 富文本编辑器粘贴图片；⑤ data URI Scheme 调试。

适用场景

  • 把已有 Base64 加上 data: 前缀与 MIME 类型，得到可直接嵌入 HTML 的 DataURL
  • 从已有 DataURL 中提取纯 Base64 部分，便于重新组装或传输
  • 调试前端 data: URI 资源时确认 Base64 负载是否完整
  • 自动识别剪贴板里 Base64 对应的 MIME 类型（PNG/JPEG/PDF 等）
  • 为 CSS background-image 或 HTML <img src> 准备 data URL
  • 把图片 Base64 在 Markdown 富文本编辑器中转为可粘贴的 DataURL

使用方法

  1. 选择方向：「加头」（纯 Base64 → DataURL）或「去头」（DataURL → 纯 Base64）。
  2. 在左侧输入框粘贴内容：加头模式粘贴纯 Base64，去头模式粘贴 data:... 字符串。
  3. 加头模式可选：保留「自动识别」或在 MIME 下拉中选择具体类型。
  4. 工具实时转换，结果显示在右侧，可复制或下载为 txt。

功能特点

  • 两个方向互转：纯 Base64 ↔ DataURL
  • 11 种 MIME 类型预设：图片、文档、音视频、文本
  • 自动识别 MIME：通过魔术字节识别 PNG/JPEG/GIF/WEBP/PDF
  • 去除空白：自动清理换行、空格等杂质字符
  • 实时转换：输入 300ms 后自动重算
  • 方向自动切换：切换方向时输入输出自动交换
  • 一键复制：转换结果可直接复制到剪贴板
  • 下载 txt：保存为 dataurl-result.txt 文件
  • PC / 移动端自适应：左右分栏可拖拽 / tab 切换
  • 纯浏览器处理：内容不上传服务器

最佳实践

先用自动识别

如不确定 MIME 类型，保留默认「自动识别」让工具检测；识别失败再手动选择。

大小限制

DataURL 在浏览器有 2-4MB 限制，过大文件建议直接引用 URL 而非嵌入。

去除杂质字符

粘贴 Base64 时常含换行，工具会自动去除；如对杂质敏感可先用「Base64 清理」。

对比检查

转换后可用「Base64 校验」或浏览器开发者工具确认 DataURL 是否能正常加载。

复制后再检查

粘贴到目标位置后用浏览器 console 检查解码结果是否符合预期。

常见问题

加头模式已经在自动识别吗？

是的。本工具默认开启自动识别，通过检测 Base64 的前几个字节（魔术字节）判断是 PNG、JPEG、GIF、WEBP 还是 PDF。如果需要其他 MIME 类型（如 application/json、video/mp4），可在下拉中手动选择。

已经有 data: 前缀的输入会怎样？

加头模式下，若输入已以 data: 开头，工具会原样返回，不重复添加前缀。去头模式下若输入不是 DataURL 格式，工具会去除空白字符后返回纯 Base64。

自动识别失败会怎样？

如果 Base64 不匹配 PNG/JPEG/GIF/WEBP/PDF 中的任何魔术字节，自动识别会回退到 application/octet-stream。如需其他 MIME 类型，建议手动选择。

支持哪些 MIME 类型？

image/png、image/jpeg、image/gif、image/webp、image/svg+xml、application/pdf、application/json、text/plain、text/html、audio/mpeg、video/mp4，共 11 种常用类型。

DataURL 在浏览器里有大小限制吗？

是的。多数浏览器对 DataURL 总长度有限制（约 2MB-4MB 不等），超过限制会导致资源加载失败。大文件建议改用普通 URL 引用。

DataURL 能用在哪些地方？

HTML 的 <img src>、CSS 的 url()、<a href> 下载、JavaScript 的 fetch、Markdown 的图片语法、JSON 数据中的内嵌资源等。

会自动去除 Base64 里的换行和空格吗？

会的。加头模式下会先去除换行和空格再拼接前缀；去头模式从 DataURL 提取后也会去除空白字符。

切换方向时输入会变吗？

切换方向时，工具会自动把当前输出作为新输入，便于连续操作。

内容会上传服务器吗？

不会。所有转换在浏览器本地完成，输入和输出都不离开你的设备。

术语表

DataURL
RFC 2397 定义的数据 URI 方案，格式 data:[<mime>];base64,<data>，可直接作为 src、href、url() 等的值。
MIME 类型
媒体类型标识，如 image/png、application/pdf。本工具支持 11 种常用 MIME 类型，并可自动识别。
魔术字节 (Magic Bytes)
文件开头的固定字节，用于识别文件类型。本工具通过检测魔术字节识别 PNG/JPEG/GIF/WEBP/PDF 等格式。
Base64
用 64 个可打印字符表示二进制数据的编码方式。DataURL 的 payload 部分就是 Base64。
Data URI Scheme
RFC 2397 定义的 data: URI 协议，是 DataURL 的正式规范名。

Authoritative References