すでにJavaScriptによるBase64 Encodingの実装は複数あるのですが、これまた気に入った車輪がなかったので再発明。

Demo

Textにはencodeすべき文字列を、Base64にはdecodeすべき文字列を入力

TextBase64 (URL Safe )
Roundtripiframe w/ data:

Discussion

まず車輪の再発明に至った理由ですが、

  1. Firefox 2以降とSafari 3.1以降には、window.atobならびにwindow.btoaが実装されているので、使える時にはこれを使いたかった。
  2. ただし、これらはそのまま使えない。引数に/[^\x00-\xFF]/な文字が入っているとUncaught Exceptionになる。これはFirefox 3を含む、window.(atob|btoa)を持つ全てのブラウザーがそう。
  3. URI SafeなBase64もサポートしたかった。

ということになります。

Base64の利点は、なんといっても「固定税率」、それも比較的「税率が低い」ことにあります。Paddingなしなら、3バイトが4バイトにencodeされるので、33%ということになります。これに対してencodeURIComponentの税率は、UTF-8基準で最高で3倍、UTF-16基準で最高で4.5倍にも達します。ただでさえ多くの情報を詰め込めないURI渡しにおいて、%AFなencodingはあまりにももったいない。特にjsonpを使ったAjaxではGETメソッドしか使えないのでこの問題は深刻です。URL Safe な Base64 は、長めのデータをURI渡しするのにまさにうってつけです。

しかし、肝心のクライアントの方がそれに対応していなければ話になりません。それで車輪の再発明というわけです。

APIs

Base64.encode(str)
strをBase64 encodeします。strに/[^\x00-\xFF]/な文字はutf8化します。
Base64.encodeURI(str)
strをURL Safe な Base64 encodeします。
Base64.decode(base64)
base64をJavaScript文字列にdecodeします。URL Safe な Base64 もdecodeできるので、Base64.deocdeURI()は今のところありません。

通常これで充分ですが、Base64には他にも以下のメソッドが搭載されています。

Base64.atob(a)
Base64.btoa(b)
window.(atob|btoa)互換のメソッド。/[^\x00-\xFF]/な文字を受け付けないところも同じです。
strをBase64 encodeします。strに/[^\x00-\xFF]/な文字はutf8化します。
strをURL Safe な Base64 encodeします。
Base64.utob(str)
strをutf8表現にします。例えば'弾'は'\xE5\xBC\xBE'になります。
Base64.btou(bin)
binをJavaScript文字列にします。'\xE5\xBC\xBE'は'弾'になります。

さいごに

例によってCodeReposにあげておきました。ご自由にお使いになるだけではなく、添削していただけると幸いです。

Enjoy!

Base64.decode('RGFuIHRoZSBKYXZhU2NyaXB0ZXI=')

See Also:

Demo Source



Source

base64.js