Base64 を PNG に変換

Base64 形式の PNG が使われる場面

Base64 として目にすることが最も多い画像形式は PNG です。canvas.toDataURL() を引数なしで呼び出すと、PNG の data URI が返されます。ブラウザ自動化ツールはスクリーンショットを Base64 の PNG で返します。たとえば Puppeteer の page.screenshot({ encoding: 'base64' }) や Selenium の get_screenshot_as_base64() です。グラフ描画ツール、QR コード生成ツール、画像生成 API も、JSON 内の Base64 フィールドとして画像を返すことがよくあります。

PNG の文字列は簡単に見分けられます。必ず iVBORw0KGgo で始まり、これは 89 50 4E 47 で始まる 8 バイトの PNG シグネチャをエンコードしたものです。その後に AAAANSUhEUg が続きます。これは幅と高さを格納する IHDR チャンクの先頭部分です。

JSON からコピーした文字列は、まず簡単に確認してください。たとえば PHP の json_encode はデフォルトでスラッシュをエスケープするため、PHP の API から受け取った PNG には \/ が含まれていることがあります。貼り付ける前に、これを / に置き換え、前後の引用符を削除してください。

PNG で保存する理由

PNG は細部を一切失わずに圧縮でき、完全なアルファチャンネルを保持するため、柔らかい影やアンチエイリアス処理された輪郭もそのまま残ります。そのため、スクリーンショット、UI 要素、図表、文字を含む画像に最適です。写真の場合は、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 にエンコードできます。