Base64 → 画像について
ログ、API レスポンス、HTML 断片に長い Base64 や data URL が含まれることがあります。本ページに貼れば即プレビューし、問題なければファイル保存できます。
data URL は data:image/png;base64, 等で始まります。API が本文だけ返す場合も、デコード後の PNG/JPEG/GIF/WebP シグネチャで形式を判別します。
できること
貼ってプレビュー
data URL 全文または JSON の Base64 フィールドを入力。編集に合わせてプレビュー更新。「画像をダウンロード」で拡張子付き保存。
data URL と生本文
- data URL:img src や CSS から丸ごと貼り付け。
- 生 Base64:REST で type を別送するパターン。
- 有効な画像データならデコード結果のバイトは同じです。
形式検出
- data URL なら MIME プレフィックスが表示の鍵。
- 生入力はデコード後に各形式のマジックバイトを確認。
- 非画像・不正 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 ならそのまま