Base64 を PNG に変換

Base64 を PNG に変換する方法

1. 入力欄に Base64 か data:image/png;base64,... 形式の URI 全体を貼り付けます。代わりに、文字列の入った .txt ファイルを開くかドロップしても構いません。
2. ステータス行を確認します。有効な Base64 と表示され、検出 が PNG になっているはずです。プレビューには画像とそのピクセルサイズが表示されます。
3. 必要なら ファイル名 を変更します。拡張子 はすでに png になっています。
4. ファイルをダウンロード を押します。

データが別の形式だった場合は、プレビューの上に「これは PNG ではなく JPEG のようです。」のような注意書きが表示され、.jpg としてダウンロード ボタンが付きます。名前を変えても何も変換されないので、たいていは本来の拡張子で保存するほうが賢明です。

PNG の Base64 はどこから来るのか

画像をテキストとして渡す多くのツールでは、PNG がデフォルトの出力です。

• ブラウザの canvas.toDataURL() は、ほかの形式を指定しない限り PNG の data URI を返します。署名パッド、お絵描きアプリ、画像をエクスポートするグラフライブラリはこれを使っています。
• ブラウザの自動操作：Selenium の get_screenshot_as_base64() や Puppeteer の page.screenshot({ encoding: "base64" }) は、PNG のスクリーンショットを接頭辞なしの素の Base64 で返します。テストレポートでは JSON や HTML に埋め込まれていることがよくあります。
• QR コード、バーコード、CAPTCHA、地図、画像生成の API は、PNG を JSON のフィールドで返すのが一般的です。
• インラインのアイコンを含む HTML や CSS、レポートやノートブックの単一ファイルでのエクスポート。

どれもそのまま貼り付けられます。改行、末尾の = の欠落、URLセーフの文字も許容され、パディングを補った場合はステータス行に表示されます。

PNG のヘッダーを読む

PNG は 8 バイトのシグネチャで始まり、その後に画像の基本的なプロパティを持つ IHDR チャンクが続きます。16進ダンプを表示 を押すと確認できます。透過付きの 120×40 の画像なら、最初の 2 行は次のようになります。

00000000  89 50 4e 47 0d 0a 1a 0a  00 00 00 0d 49 48 44 52  |.PNG........IHDR|
00000010  00 00 00 78 00 00 00 28  08 06 00 00 00 35 ea 3e  |...x...(.....5.>|

カラータイプを見れば、どんな種類の PNG かが分かります。00 はグレースケール、02 は RGB、03 はパレット（インデックスカラー）、04 はアルファ付きグレースケール、06 はアルファ付き RGB です。最適化ツールが出力するパレット PNG は RGBA のものよりずっと小さいことが多く、Base64 を短くしたいときに知っておくと役立ちます。

幅が数百万ピクセルなど、寸法があり得ない値に見える場合は、シグネチャの後のバイトが破損していて、プレビューは失敗します。

コードで PNG を確認する

同じヘッダーの項目は、画像ライブラリを使わずに Python の数行で読めます。カンマで分割しているので、素の Base64 でも data URI でも動きます。

import base64, struct

def png_info(b64: str) -> dict:
    data = base64.b64decode(b64.split(",", 1)[-1])
    if data[:8] != b"\x89PNG\r\n\x1a\n":
        raise ValueError("not a PNG")
    width, height, depth, color_type = struct.unpack(">IIBB", data[16:26])
    return {"width": width, "height": height, "bit_depth": depth, "color_type": color_type}

Node.js でファイルに書き出すなら、fs.writeFileSync("shot.png", Buffer.from(b64, "base64")) で十分です。Node の Base64 デコーダーは改行を読み飛ばし、URLセーフの文字も受け付けます。詳しくは Python での Base64 と Node.js での Base64 を参照してください。

PNG がデコードできない、表示されない場合

• 「無効な文字」エラー。 文字列に Base64 以外のものが入っています。\/ のような JSON のエスケープ、HTML エンティティ、ログ行の残りなどです。エラーには位置が示され、Base64 を修復 でよくある原因を取り除けます。
• 画像が一部しか描画されない、または表示されない。 文字列が途中で切れています。完全な PNG は IEND チャンクで終わります。元のファイルのサイズが分かるなら、サイズ と比べてください。
• 「PNG ではないようです」。 バイト列がそもそも PNG のシグネチャで始まっていません。暗号化されたデータ、16進数などの別のエンコーディング、二重にエンコードされた Base64 によく見られ、最後の場合は もう一度デコード が表示されます。
• プレビューは表示されるのに、別のプログラムがファイルを拒否する。 ここに表示される SHA-256 を、そのプログラムが受け取ったファイルのハッシュと比べてください。一致していれば、デコードしたファイルは正しく、問題はプログラムの側にあります。

逆に PNG をエンコードするには、PNG を Base64 に変換 を使ってください。

よくある質問