ホーム > カテゴリ > HTML5・JavaScript >

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>

結果:エラーが発生します。

ブラウザエラー内容
ChromeUncaught InvalidCharacterError: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
FireFoxInvalidCharacterError: String contains an invalid character
IE11InvalidCharacterError
EdgeInvalidCharacterError

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. のエラー回避方法

公開日：2016年02月16日 最終更新日：2016年02月18日
記事NO：01765


この記事を書いた人

💻 ITスキル・経験
サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。

画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ
プチモンテ代表、アーティスト名：プチモンテ
🎵 音楽制作
BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は叙情詩、叙情的な楽曲が多い。楽曲制作は2023年12月中旬 ～

オリジナル曲を始めました✨

YouTubeで各楽曲を公開しています🌈
https://www.youtube.com/@petitmonte

【男性ボーカル】DA・KA・RA | 新たな明日が風と共に訪れる

【男性、女性ボーカル】時空を超越する先に | 時空と風の交響曲

【女性、男性ボーカル】絆 | 穏やかな心に奏でる旋律