Base64文字列を画像ファイルに戻す方法
APIレスポンスやブラウザのスナップショット、`data:image/...`を貼ってPNGやJPEGとして保存・共有します。
このガイドと一緒に使うと便利なツール：
なぜ重要か
チャートライブラリが描画結果をdata:image/png;base64,...で返す。**バグチケットには実ファイルのPNGが欲しい。**手でデコードするにはMIME前置、カンマ境界、Buffer APIの選択が必要。貼ってダウンロードできるツールなら一瞬です。
実際の3つのシーン
console.logのdata URIをコピーし貼ってPNGを保存します。
チケットに添付
ワンオフNodeスクリプト不要でデコード・表示します。
視覚確認だけで足りる
cid:参照のBase64ブロックを貼り、復元画像を引き渡します。
セキュリティチームへ証拠
手順
Base64→画像ツールを開きます。
data URIまたは生Base64を貼る
どちらも可。接頭辞からMIMEを検出、生だけなら指定を求められます。
プレビュー
右ペインにデコード画像。幅・高・ファイル種別を表示します。
整合性確認
壊れまたは0×0なら入力が破損または切り捨てです。
ファイルとしてダウンロード
既定ファイル名は推定拡張子（
.png、.jpg、.webpなど）。オプション：ハッシュでフィンガープリント
保存後ハッシュジェネレーターで整合チェック。
Data URI
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAusB9V4dM7sAAAAASUVORK5CYII=デコード結果
Image: 1 × 1 PNG
Size: 68 bytes (decoded)
実践テクノ
- **デコード前に空白削除。**メール由来は76文字ごとのソフト改行がつきがちです。
- MIMEが実バイト列と一致するか。
data:image/svg+xmlにスクリプトが紛れる攻撃もあるのでデコード後に検査します。 - 複数画像data URI（マニフェスト等）は接頭辞後の
,で分割して各エントリをデコードします。 - 逆—ファイルからdata URIが欲しければ画像→Base64。
よくある落とし穴
よくある誤り
MIMEと中身の不一致で拡張子がずれる
接頭辞がimage/jpegでもバイトがPNGなら開けません。**マジックナンバー（PNG、JFIF）**を見ます。
よくある誤り
巨大文字列の貼り付けでタブが固まる
マルチMBはいったん.txtに保存して入力領域へドラッグの方が無難です。
向いていない用途
- コード内でのプログラムデコード—
atob、Buffer.from、base64.b64decodeなどネイティブAPIへ。 - 画像以外（
.woff2や音声）—エンコード／デコードで汎用バイナリへ。 - PDF／メールボックスからの大量抽出—コンテナ解析は専門ツール向きです。
FAQ
大きいファイルは？
ブラウザメモリ次第で数百MB級まで。それ以上は端末でbase64 -dなどCLIを。
SVGは対応？
はい。**data:image/svg+xml;base64,...**は表示でき.svg保存もできます。
データはアップロードされる？
いいえ。ブラウザ内だけでデコードします。
次のステップ
- 復元後は画像圧縮。
- 保全用にハッシュジェネレーター。
- 逆方向は画像→Base64。