如何偵錯 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 回應。