ホーム > カテゴリ > 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