CreaTools LogoCreaTools
Tech Notes
Base64

Base64でよくあるエラーと対処法｜私が詰んだ3つのケース

2025-11-03

:::note ※Base64でエラーが出た人向けの「トラブルシューティング」記事です :::

結論（私の判断基準）

  • 「無効なBase64」エラー → 改行・空白が混入している
  • 文字化け → バイナリをテキストとしてデコードした
  • 画像が表示されない → MIMEタイプが間違っている

私はこの3つで何度も詰んだ。

🚀 今すぐ変換 → Base64エンコーダー

私が詰んだケース1：改行が混入していた

APIからBase64文字列を受け取っていた。ある日、デコードに失敗するようになった。

「無効なBase64文字列です」というエラー。

原因を探した。3時間かかった。Base64文字列の途中に改行が入っていた。

どこかの処理で、長い文字列を改行区切りにしていた。Base64で使えるのは A-Z, a-z, 0-9, +, /, = のみ。改行は使えない。

// ❌ 改行が入っている
const base64 = "iVBORw0KGgo...\n...AAASUVORK5CYII=";

// ✅ 改行を除去
const cleaned = base64.replace(/[\r\n]/g, '');

Base64エラーが出たら、まず改行・空白を疑う。

私が詰んだケース2：バイナリをテキストとしてデコードした

画像のBase64をデコードした。文字化けした。

当たり前だった。画像はバイナリ。テキストとしてデコードしたら文字化けする。

// ❌ テキストとしてデコード（文字化けする）
const text = atob(imageBase64);

// ✅ バイナリとして扱う
const binary = atob(imageBase64);
const bytes = new Uint8Array(binary.length);
for (let i = 0; i < binary.length; i++) {
  bytes[i] = binary.charCodeAt(i);
}

バイナリデータはデコード後にファイルとして保存する。テキストとして扱わない。

私が詰んだケース3：MIMEタイプを間違えた

PNGファイルをBase64化してHTMLに埋め込んだ。表示されない。

<!-- ❌ MIMEタイプが間違っている -->
<img src="data:image/jpeg;base64,iVBORw0KGgo...">

<!-- ✅ PNGならimage/png -->
<img src="data:image/png;base64,iVBORw0KGgo...">

**PNGなのに image/jpeg を指定していた。**ファイル形式に合ったMIMEタイプを使う。

JavaScriptの atob() でエラーが出る

atob("日本語") // Error: Invalid character

atob() はASCII文字列しか扱えない。日本語を含む場合はUTF-8エンコードが必要。

// エンコード（日本語対応）
const encoded = btoa(unescape(encodeURIComponent("日本語")));

// デコード（日本語対応）
const decoded = decodeURIComponent(escape(atob(encoded)));

日本語を含むならこの方法。覚えておく。

エンコード結果が長すぎる

Base64は元データより約33%大きくなる。これは仕様。

元サイズBase64後
75KB約100KB
750KB約1MB

大きいファイルはBase64化しない方がいい。私は10MBの画像をBase64化してタイムアウトした。

迷ったときの判断

エラーまず確認すること
無効なBase64改行・空白が混入していないか
文字化けバイナリをテキストとしてデコードしていないか
画像が表示されないMIMEタイプが正しいか
atobでエラー日本語が含まれていないか

この記事で解決しない場合

Base64のエラーは原因が分かりにくい。改行・空白・MIMEタイプ。この3つをまず疑う。