實用工具
如何把 Base64 字串還原成圖片檔
把 API 回傳、瀏覽器快照或剪貼的 `data:image/...` 解成可存檔分享的 PNG 或 JPEG。
MoreKits 團隊
2026-01-02
9 分鐘閱讀
相關工具
與本篇教學搭配使用的更多工具：
為什麼重要
前端在除錯圖表函式庫。函式庫回傳 data:image/png;base64,... 字串，開發者想當成真正的 PNG 附在 bug 單上。手動解碼要搞清 MIME 前綴、逗號界線與正確 Buffer API。專用工具貼上即下載。
三個實際場景
前端開發者
把 JS console 產生的圖表存成 PNG
從 console.log 複製 data URI，貼上，下載 PNG。
可附在工單
API 測試者
檢視 Base64 回傳的大頭照
解碼預覽，不必寫一次性 Node 腳本。
視覺確認
郵件鑑識
從釣魚郵件取出內嵌圖
貼上 cid: 對應的 Base64 區塊，還原圖片後轉交。
交資安分析
操作說明
開啟 Base64 轉圖片工具。
貼上 data URI 或純 Base64
兩種皆可。工具從前綴判 MIME，若只有純 Base64 會請你選型別。
預覽圖片
解碼結果在右側。會報告寬高與檔案型別。
確認完整性
預覽壞掉或 0×0 代表輸入毀損或截斷。
下載檔案
預設檔名依副檔名推斷（
.png、.jpg、.webp）。選填：雜湊指紋
存檔後可用 雜湊產生器 做完整性檢查。
Data URI
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAusB9V4dM7sAAAAASUVORK5CYII=解碼結果
Image: 1 × 1 PNG
Size: 68 bytes (decoded)
實用技巧
- 解碼前先去掉空白。 郵件貼上的 Base64 常每 76 字元軟換行。
- 確認 MIME 與實際型別一致。 攻擊者可能把腳本藏在
data:image/svg+xml。解碼後務必檢視。 - 多張圖的 data URI（清單匯出、JSON）可在前綴後的
,切開逐筆解碼。 - 反向——有檔案要 data URI 請用 圖片轉 Base64。
常見陷阱
常見陷阱
MIME 與實際位元組不符導致副檔名錯
data URI 前綴是準則。若前綴寫 image/jpeg 實際卻是 PNG，檔案會打不開。檢查魔數（PNG、JFIF）。
常見陷阱
巨大字串貼上卡住
多 MB 字串可能讓 textarea hang。先存成 .txt 再拖進輸入區，勿直接貼上。
何時不適合用這套
- 程式內內建解碼——用語言內建 API（
atob、Buffer.from、base64.b64decode）。 - 非圖片二進位如字型（
.woff2）或音訊——用 編碼／解碼工具 下載為泛用二進位。 - 從 PDF／信箱大量萃取——需專門鑑識工具處理容器。
FAQ
支援很大的檔案嗎？
視瀏覽器記憶體，通常可達數百 MB。再大請用終端 base64 -d。
支援 SVG 嗎？
支援。data:image/svg+xml;base64,... 解成可檢視 SVG；也可存成 .svg。
資料會上傳嗎？
不會。解碼完全在瀏覽器執行。
下一步
- 用 圖片壓縮 壓縮救回的圖。
- 為歸檔用 雜湊產生器 計算檔案雜湊。
- 要反向（圖→Base64）試 圖片轉 Base64。