使用方法
- 貼上 Base64 字串或完整的 data:image/png;base64 URI。
- 檢視預覽,透明區域會顯示在棋盤格背景上。
- 下載格式保持為 PNG。如果資料是 JPEG、WebP 等其他格式,會在瀏覽器中轉換為 PNG。
- 下載 .png 檔案。
Base64 PNG 通常來自哪裡
PNG 是最常以 Base64 形式出現的圖片格式。不帶參數呼叫 canvas.toDataURL() 返回的就是 PNG data URI;瀏覽器自動化工具也會把截圖作為 Base64 PNG 返回,例如 Puppeteer 的 page.screenshot({ encoding: 'base64' }) 和 Selenium 的 get_screenshot_as_base64()。圖表渲染服務、二維碼生成器和影像生成介面也經常在 JSON 中用 Base64 欄位返回圖片。
PNG 字串很好辨認:它總是以 iVBORw0KGgo 開頭,這是以 89 50 4E 47 起始的 8 位元組 PNG 簽名的編碼結果。緊隨其後的 AAAANSUhEUg 是 IHDR 資料塊的開頭,其中記錄了圖片的寬度和高度。
從 JSON 中複製出來的字串最好先檢查一下。例如 PHP 的 json_encode 預設會轉義正斜槓,所以 PHP 介面返回的 PNG 可能帶有 \/。貼上前請把它們替換為 /,並去掉兩側的引號。
為什麼儲存為 PNG
PNG 採用無失真壓縮,並帶有完整的 Alpha 通道,柔和的陰影和抗鋸齒邊緣都能完整保留。因此它非常適合截圖、介面元素、示意圖以及包含文字的圖片。如果是照片,JPG 或 WebP 的檔案會小得多。
把 JPEG 或 WebP 轉成 PNG 會如實保留螢幕上看到的內容,但無法找回有失真壓縮已經丟掉的細節,而且生成的 PNG 通常比原檔案更大。
在程式碼中儲存 Base64 PNG
# Python
import base64
with open('screenshot.png', 'wb') as f:
f.write(base64.b64decode(b64_string))
// 瀏覽器:把 data URI 轉為 Blob,無需手動解碼
const blob = await (await fetch(dataUri)).blob();
const url = URL.createObjectURL(blob);
需要反向操作?PNG 轉 Base64 可以把檔案編碼為字串或 data URI。
常見問題
怎樣判斷一個 Base64 字串是不是 PNG?
iVBORw0KGgo 開頭。本工具還會直接讀取簽名位元組,即使 data URI 中宣告的是其他型別,也能報告真實格式。轉換為 PNG 會降低畫質嗎?
不會。PNG 是無損格式,像素會按照瀏覽器解碼的結果原樣儲存。唯一的損失只可能來自原始檔本身此前的壓縮。
透明背景會保留嗎?
會。PNG 輸出會保留完整的 Alpha 通道。選擇 JPEG 時透明區域會填充為白色,選擇 GIF 時每個像素只能是完全透明或完全不透明。
PNG data URI 顯示為破損圖片是什麼原因?
\/ 之類的 JSON 轉義。