Base64 → 画像

Data URL または生の画像 Base64 を貼り付け—入力に合わせてプレビュー更新。問題なければ PNG、JPEG、GIF、WebP をダウンロード。

Base64 → 画像について

ログ、API レスポンス、HTML 断片に長い Base64 や data URL が含まれることがあります。本ページに貼れば即プレビューし、問題なければファイル保存できます。

data URL は data:image/png;base64, 等で始まります。API が本文だけ返す場合も、デコード後の PNG/JPEG/GIF/WebP シグネチャで形式を判別します。

できること

貼ってプレビュー

data URL 全文または JSON の Base64 フィールドを入力。編集に合わせてプレビュー更新。「画像をダウンロード」で拡張子付き保存。

data URL と生本文

  1. data URL:img src や CSS から丸ごと貼り付け。
  2. 生 Base64:REST で type を別送するパターン。
  3. 有効な画像データならデコード結果のバイトは同じです。

形式検出

  1. data URL なら MIME プレフィックスが表示の鍵。
  2. 生入力はデコード後に各形式のマジックバイトを確認。
  3. 非画像・不正 Base64 はエラー表示(壊れた画像は出しません)。

画像 → Base64 とセット

HTML/JSON に埋め込むときは画像→Base64、チケットや API から復元・検証するときは本ページを使います。

よくある使い方

HTML の data URL 確認

テンプレの src="data:image/…" を貼り、素材が正しいか見てから必要ならダウンロード。

API の画像フィールド

JSON の Base64(プレフィックス有無どちらも)を貼り、MIME とサイズを見てから QA/デザインへ渡す。

インライン小アイコン

メールや PDF エクスポートの小 PNG を atob スクリプトなしで素早く確認。

よくある質問

Base64 を画像にするには?
入力欄に data URL または生 Base64 を貼る。成功するとプレビューとダウンロードが使えます。
data:image/… プレフィックスは必須?
必須ではありません。全文の data URL でも、デコード後に画像ヘッダが取れる生本文でも可です。
対応形式は?
PNG、JPEG、GIF、WebP(エンコーダと同じ)。それ以外はエラーになります。
デコードが失敗する原因は?
コピー欠け、改行や不正文字、テキストの Base64 など。画像→Base64 で往復テストも有効です。
ダウンロードは常に PNG?
検出形式に合わせ .png / .jpg / .gif / .webp が付きます。

入力例

  • data:image/png;base64,…img src / CSS url() から
  • JSON 生フィールドファイルヘッダで形式判定
  • 空白・改行デコード前に除去
  • img src="…"属性値が data URL ならそのまま