使い方
「方向」で「エンコード」か「デコード」を選びます。
- エンコード:「入力の種類」が「テキスト」なら、「元のテキスト」に入れた文字列が「Base64の結果」に出ます。
HelloはSGVsbG8=、caféはY2Fmw6k=です。「ファイル」に切り替えると、ファイルを指定する欄が現れます。 - デコード:「Base64文字列」にBase64か
data:URLを入れると、「デコード結果」に元のテキストが出ます。
結果の横にある「結果をデコード入力へ」と「結果をエンコード入力へ」は、いま出た結果を逆方向の入力へ移します。エンコードしたものをすぐ戻して、原文と同じかどうか確かめるときに使います。
「URLセーフ(-_、パディングなし)」のチェックボックスは、テキストのエンコードとデコードの両方に効きます。ファイルのエンコードにこのオプションはありません。
運ぶのは文字ではなくバイトです
Base64は、3バイトを4文字に置き換える表記法です。そのためテキストをエンコードするには、まず文字をバイト列に変える必要があり、このツールはそこで必ずUTF-8を使います。UTF-8で € は3バイトなので、Base64ではちょうど4文字の 4oKs になります。
バイト数が3の倍数でないときは、末尾に = を足して4文字単位にそろえます。これがパディングです。
| 元のテキスト | バイト数 | Base64の結果 |
|---|---|---|
a |
1 | YQ== |
ab |
2 | YWI= |
abc |
3 | YWJj |
€ |
3 | 4oKs |
😀 |
4 | 8J+YgA== |
3バイトが4文字になるので、結果は元のデータよりおよそ3分の1長くなります。ファイルをdata URLにしてHTMLやCSSへ埋め込むと、容量がそれだけ増えるということです。
ブラウザ標準の関数 btoa は、コードポイントが0〜255の範囲の文字しか受け付けないため、€ や絵文字のようにその範囲を外れる文字の入った文字列ではエラーになります。このツールはその関数を使わず、UTF-8のバイト列を直接変換するので、どんな文字でもエンコードでき、デコードでもUTF-8として元に戻します。
「URLセーフ」オプションで変わること
標準のBase64は、英大文字・英小文字と数字のほかに + と / の2文字を使い、パディングに = を使います。3つともURLの中では別の意味を持つ文字なので、アドレスやクエリの値、ファイル名に入れるなら「URLセーフ(-_、パディングなし)」をオンにします。JWT(JSON Web Token)がこの表記を使っています。
| 元のテキスト | オプションがオフ | オプションがオン |
|---|---|---|
>>>??? |
Pj4+Pz8/ |
Pj4-Pz8_ |
a |
YQ== |
YQ |
デコードでオプションを合わせる必要があるのは、文字列に +、/ や -、_ が含まれているときです。Pj4-Pz8_ をオプションがオフのまま入れると、使えない文字 - があるというエラーになり、Pj4+Pz8/ をオプションがオンのまま入れると、+ で同じエラーになります。この4文字がひとつも入っていない SGVsbG8= のような文字列は、どちらの設定でもデコードできます。パディングはオプションに関係なく、あってもなくてもかまいません(SGVsbG8 も Hello と読みます)。
ファイルをdata URLに、Base64をファイルに戻す
「入力の種類」を「ファイル」にすると、ファイルを1つドラッグ&ドロップするか、選択できます。形式は問わず、サイズは10MBまでです。結果は data:image/png;base64,iVBORw0KG... のように、ファイル形式が先頭に付いたdata URLで、HTMLの img タグやCSSの url() にそのまま入れられます。ブラウザが形式を判別できなかったファイルは application/octet-stream と表示されます。data URLにURLセーフの表記を使うとブラウザが読めないので、必ず標準の表記とパディングで作ります。
逆方向はデコードで行います。Base64かdata URLを入れると結果の横にダウンロードボタンが現れ、テキストでない内容もファイルとして保存できます。
- data URLを入れると
base64,より後ろだけを読みます。このときは、URLセーフのチェックボックスがオンでも標準の表記として解釈します。 - ファイル名は
decodedに拡張子が付きます。data URLの形式がPNG、JPEG、GIF、WebP、SVG、ICO、PDF、TXT、CSV、JSON、ZIP、MP3、MP4のいずれかなら、それに合った拡張子(decoded.pngなど)になります。 - それ以外の形式や、形式の情報がない素のBase64は
decoded.binとして保存されます。元の形式がわかっているなら、保存したあとで拡張子を変えてください。 data:text/plain,helloのように;base64のないdata URLはBase64ではないので、使えない文字:があるというエラーになります。
デコードエラーは3種類
| エラーの案内 | こんな入力で | 意味 |
|---|---|---|
| Base64として使えない文字があります | Pj4-Pz8_(オプションがオフ) |
いま選んでいる表記にない文字があります。その文字は案内の中に表示されます。 |
| Base64の長さかパディング(=)が正しくありません | SGVsb、SGVsbG8== |
文字数が合わないか、= が多すぎるか、途中にあります。コピーの際に末尾が切れたときによく起こります。 |
| デコードしたバイト列は正しいUTF-8テキストではありません | iVBORw0KGgo= |
Base64としては正常ですが、中身が文章ではありません。 |
3つ目の場合は、結果の横に「16進数で表示」が現れます。押すとバイトを2桁の16進数で並べ、「テキストで表示」を押すと元に戻ります。iVBORw0KGgo= の16進数は 89 50 4e 47 0d 0a 1a 0a で、2番目から4番目のバイト(50 4e 47)が文字の PNG にあたるため、PNGファイルの先頭部分だとわかります。このエラーが出ていても、ダウンロードボタンはそのまま使えます。
