Base64 から画像へ

用途

これは image-to-Base64 エンコーダーの逆方向です。data: URI（または生の Base64 ペイロード）を受け取り、表示・ダウンロード可能な画像へデコードします。URI 内の MIME タイプから形式を自動判定し、生の Base64 だけが渡された場合は先頭バイト（PNG シグネチャ、JPEG SOI マーカー、GIF8 ヘッダ、RIFF…WEBP、SVG マークアップ）を覗いて種別を判定します。すべてブラウザ内で atob と <img> の data URI を使って動きます。

使うべきタイミング

• CSS・HTML・Markdown から data URI だけがコピーされた状態で、元画像を復元したい時。
• API レスポンスや JWT 風トークンに含まれる Base64 文字列の中身を確認したい時。
• どこかでレンダリングされない Base64 画像のデバッグ — この場で往復させてペイロードの正当性を確認。
• シングルファイル HTML デモや自己完結型メールから埋め込みアセットを取り出す時。

よくある注意点

• どちらの形式も受け付けます。 完全な data:image/png;base64,iVBORw0… でも、生の iVBORw0… ペイロードでも OK ですが、判定できない形式を生で渡すとダウンロードは .bin 扱いになります。
• URL-safe Base64 は別物です。 標準 Base64 は + /、URL-safe は - _ を使います。JWT ペイロードは URL-safe なので、貼り付け前に置換してください。
• ペイロード内の空白は無視されます。 改行やスペースを取り除いてからデコードするので、複数行の文字列も動作します。
• 壊れた画像はブラウザがレンダリングしません。 プレビューが空でもデコード自体が成功していれば、バイト列は Base64 として有効ですが、実際の画像でない（または未サポート形式である）可能性が高いです。