如何调试 JSON API 响应中的 Base64 图片

JSON 中的 Base64 问题

多模态 AI 接口——图片生成、OCR、语音合成——通常会在 JSON 响应中以 Base64 编码字符串的形式返回媒体数据。传统的 JSON 查看器将这些字符串当作纯文本处理，你看到的只是大段编码字符，无法辨别实际内容。

通常的做法是一个多步骤流程：定位 Base64 字段、复制字符串、打开一个在线解码网站、粘贴、解码、下载。单个字段就已经很麻烦——如果响应中包含多个 Base64 值，效率瓶颈会更加突出。

典型的 AI API 响应结构

以下是一个简化的 DALL·E 图片生成响应，包含多个图片变体：

{
  "created": 1709055842,
  "data": [
    {
      "b64_json": "iVBORw0KGgoAAAANSUhEUgAAA...",
      "revised_prompt": "A serene mountain landscape at sunset"
    },
    {
      "b64_json": "iVBORw0KGgoAAAANSUhEUgBBB...",
      "revised_prompt": "A serene mountain landscape at sunrise"
    },
    {
      "b64_json": "iVBORw0KGgoAAAANSUhEUgCCC...",
      "revised_prompt": "A serene mountain landscape at noon"
    }
  ]
}

每个 "b64_json" 字段都包含一张完整的 PNG 图片（以 Base64 编码）。在普通的 JSON 查看器中，你看到的只是三大段文本，无法查看、比较，甚至无法确认它们是否是有效的图片——除非逐个解码。

更好的方式：自动检测并内联预览

ViewJSON 会自动检测 JSON 中的 Base64 编码媒体并渲染内联预览——图片显示为缩略图，音频显示为可播放的播放器，视频显示为嵌入式播放器，PDF 显示为文档预览。

检测机制如何工作？

ViewJSON 不会根据字段名或字符串长度进行猜测，而是使用魔数检测——这与操作系统识别文件类型的技术相同。

过程很简单：

1. 对于 JSON 中的每个字符串值，ViewJSON 仅解码 Base64 内容的前 64 字节
2. 将这些字节与已知的文件格式签名（魔数）库进行比对
3. 如果匹配成功（例如 89 50 4E 47 对应 PNG，FF D8 FF 对应 JPEG），则渲染相应的预览

这种方式非常快。即使是 100MB 的 Base64 字符串，也能在毫秒内完成识别，因为检测时只解码前 64 字节。完整内容仅在展开预览时才会解码。

支持的格式

ViewJSON 目前可检测并预览 15 种以上的媒体格式：

分步教程：调试你的 API 响应

1. 打开 ViewJSON — 访问 viewjson.net
2. 粘贴 JSON — 从终端、Postman 或代码中复制完整的 API 响应，粘贴到编辑器中。不规范的 JSON（尾逗号、注释、未加引号的 key）会自动修复。
3. 查看预览 — Base64 字段会被自动检测。点击检测到的媒体字段旁边的眼睛图标（👁）即可切换内联预览。
4. 对比输出 — 展开所有预览后，你可以滚动 JSON 来并排比较多张图片，无需额外工具。
5. 分享给团队 — 使用分享按钮生成一个包含 JSON 结构的压缩 URL。注意：非常大的 Base64 数据可能会因 URL 长度限制而被截断。

最适用的场景

• 验证 DALL·E / Stable Diffusion 输出 — 文生图 API 通常会返回多个 Base64 变体。ViewJSON 让你并排查看所有图片，无需逐个解码即可选出最佳效果。
• 检查 OCR 裁剪区域 — 批量 OCR 流水线会以 Base64 返回大量裁剪的图片区域。内联查看可以立即发现裁剪偏移或错误。
• 对比 TTS 语音变体 — 在测试语音合成 API 的不同音色或语气时，你可以直接在 JSON 中播放每段音频进行对比。
• 查看 HTTP 抓包记录 — 粘贴 Postman 或 Fiddler 请求历史中的 JSON，即可看到实际发送或接收的媒体内容，无需翻阅编码字符串。

隐私

所有处理都在浏览器中完成。你的 JSON 和 Base64 数据不会发送到任何服务器，ViewJSON 可安全用于处理包含敏感内容的 API 响应。