Base64変換(エンコード/デコード)で日本語文字列に対応する[ユニコード/Unicode]
電子メールの添付ファイルなどで使用される「Base64」の符号化/復号化。今回はJavascriptでBase64のエンコード、デコード変換をする方法をご紹介します。標準ではアスキー文字列とバイナリ文字列のみ対応していますがUnicode(日本語など)でも変換できるようにします。
Base64の仕様
Base64は「A–Z」「a–z」「0-9」の62文字と「+」「/」の2つの記号を使用します。「62+2」でBase64の64ですね。その他にパディングで「=」も使用されます。
Base64のエンコードは元のデータサイズに対して4/3（約133%）増加することになります。また、76文字毎に改行コードが挿入する為に、実際は約137%となります。
似たようなエンコードとしては「ASCII85」というものもあります。こちらは4バイトが5バイト、つまり25%増となります。PhotoshopやPDFファイルなどで使用されます。
Base64のエンコード
JavaScriptの標準メソッドのwindow.btoaを使用します。このbtoaはアスキー文字列またはバイナリデータの文字列からbase64変換された文字列を返します。
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
var B = 'petitmonte';
var A = window.btoa(B)
document.write('<p>' + A +'</p>');
</script>
</body>
</html>
結果:cGV0aXRtb250ZQ==
Base64のデコード
JavaScriptの標準メソッドのwindow.atobを使用します。このatobはbase64変換された文字列からデコードされた文字列を返します。
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
var A = 'cGV0aXRtb250ZQ==';
var B = window.atob(A)
document.write('<p>' + B +'</p>');
</script>
</body>
</html>
結果:petitmonte
Base64のエンコードの失敗例
変換対象に日本語などのユニコード文字列を設定する
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
var B = 'プチモンテ';
var A = window.btoa(B)
document.write('<p>' + A +'</p>');
</script>
</body>
</html>
結果:エラーが発生します。
| ブラウザ | エラー内容 |
|---|---|
| Chrome | Uncaught InvalidCharacterError: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range. |
| FireFox | InvalidCharacterError: String contains an invalid character |
| IE11 | InvalidCharacterError |
| Edge | InvalidCharacterError |
btoaの引数には「バイナリ文字列」または「アスキー文字列」を指定する必要がある為、このようなエラーが発生します。
Base64の日本語エンコード
変換対象に日本語などのユニコード文字列を設定する
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
var B = 'プチモンテ';
var A = window.btoa(unescape(encodeURIComponent(B)));
document.write('<p>' + A +'</p>');
</script>
</body>
</html>
結果:44OX44OB44Oi44Oz44OG
Base64の日本語デコード
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
var A = '44OX44OB44Oi44Oz44OG';
var B = decodeURIComponent(escape(window.atob(A)));
document.write('<p>' + B +'</p>');
</script>
</body>
</html>
結果:プチモンテ
Base64のバイナリデータのエンコード
文字列ではなくUint8Array(バイナリ)から変換する方法です。
var base64 = window.btoa(String.fromCharCode.apply(null,AStream));
document.write('<p>' + base64 +'</p>');
AStreamはUint8Arrayオブジェクトです。
関連記事
画像をBase64に変換してHTMLやCSSに埋め込む[リクエスト数の軽減]
関連記事
| 前の記事： | JavaScriptでファイルを作成してダウンロードする |
| 次の記事： | Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. のエラー回避方法 |
プチモンテ ※この記事を書いた人
 | |
| 💻 ITスキル・経験 サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。 画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ |
| 🎵 音楽制作 BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は抒情詩、抒情的な楽曲が多い。楽曲制作は🔰2023年12月中旬 ～ | |
