web-dev-qa-db-ja.com

クライアントサイドJavaScriptでのBase64エンコードおよびデコード

Base64エンコーディングを使用して文字列をエンコードおよびデコードするために使用できるJavaScriptのメソッドはありますか？

javascriptbase64
223
Mo.

Firefox、Chrome、Safari、Opera、IE 10+などの一部のブラウザは、Base64をネイティブに処理できます。この Stackoverflow question を見てください。それは btoa()とatob() functions を使っています。

サーバーサイドJavaScriptの場合、 Node.JS用のbtoaパッケージ があります。

あなたがクロスブラウザの解決策を考えているのなら、 CryptoJS のような既存のライブラリや、

http://ntt.cc/2008/01/19/base64-encoder-decoder-with-javascript.html

後者の場合は、ブラウザ間の互換性について機能を徹底的にテストする必要があります。そしてエラー すでに報告されています 。

175
Ranhiru Jude Cooray

Gecko/WebKitベースのブラウザ（Firefox、Chrome、Safari）およびOperaでは、 btoa（） および atob（） を使用できます。

元の答え： JavaScriptで文字列をBase64にエンコードするにはどうすればよいですか。

62
nyuszika7h

Internet Explorer 10以降

// Define the string
var string = 'Hello World!';

// Encode the String
var encodedString = btoa(string);
console.log(encodedString); // Outputs: "SGVsbG8gV29ybGQh"

// Decode the String
var decodedString = atob(encodedString);
console.log(decodedString); // Outputs: "Hello World!"

クロスブラウザ

AMD、CommonJS、Nodejsおよびブラウザ用の書き換えおよびモジュール化されたUTF-8およびBase64 Javascriptエンコードおよびデコードライブラリ/モジュール。クロスブラウザ互換

node.jsで

Node.jsで通常のテキストをbase64にエンコードする方法は次のとおりです。

//Buffer() requires a number, array or string as the first parameter, and an optional encoding type as the second parameter. 
// Default is utf8, possible encoding types are ascii, utf8, ucs2, base64, binary, and hex
var b = new Buffer('JavaScript');
// If we don't use toString(), JavaScript assumes we want to convert the object to utf8.
// We can make it convert to other formats by passing the encoding type to toString().
var s = b.toString('base64');

そして、base64でエンコードされた文字列をデコードする方法は次のとおりです。

var b = new Buffer('SmF2YVNjcmlwdA==', 'base64')
var s = b.toString();

dojo.jsを使って

Dojox.encoding.base64を使用してバイト配列をエンコードするには、次のようにします。

var str = dojox.encoding.base64.encode(myByteArray);

Base64でエンコードされた文字列をデコードするには

var bytes = dojox.encoding.base64.decode(str)

バウアーインストールangle-base64

<script src="bower_components/angular-base64/angular-base64.js"></script>

angular
    .module('myApp', ['base64'])
    .controller('myController', [

    '$base64', '$scope', 
    function($base64, $scope) {

        $scope.encoded = $base64.encode('a string');
        $scope.decoded = $base64.decode('YSBzdHJpbmc=');
}]);

しかし、どうですか？

Base64の一般的なエンコード方法、特にJavaScriptのエンコード方法についてもっと知りたい場合は、この記事をお勧めします。 JavaScriptのコンピューターサイエンス：Base64エンコード

46
davidcondrey

これがスナイパーの記事の締め付け版です。改行なしで整形式のbase64文字列を想定しています。このバージョンでは、2、3のループが削除され、Yaroslavからの&0xff修正が追加され、末尾のNULLが削除され、さらにコードが少し削除されました。

decodeBase64 = function(s) {
    var e={},i,b=0,c,x,l=0,a,r='',w=String.fromCharCode,L=s.length;
    var A="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
    for(i=0;i<64;i++){e[A.charAt(i)]=i;}
    for(x=0;x<L;x++){
        c=e[s.charAt(x)];b=(b<<6)+c;l+=6;
        while(l>=8){((a=(b>>>(l-=8))&0xff)||(x<(L-2)))&&(r+=w(a));}
    }
    return r;
};
37
broc.seib

フェイルセーフのない短くて速いBase64 JavaScriptデコード関数：

function decode_base64 (s)
{
    var e = {}, i, k, v = [], r = '', w = String.fromCharCode;
    var n = [[65, 91], [97, 123], [48, 58], [43, 44], [47, 48]];

    for (z in n)
    {
        for (i = n[z][0]; i < n[z][1]; i++)
        {
            v.Push(w(i));
        }
    }
    for (i = 0; i < 64; i++)
    {
        e[v[i]] = i;
    }

    for (i = 0; i < s.length; i+=72)
    {
        var b = 0, c, x, l = 0, o = s.substring(i, i+72);
        for (x = 0; x < o.length; x++)
        {
            c = e[o.charAt(x)];
            b = (b << 6) + c;
            l += 6;
            while (l >= 8)
            {
                r += w((b >>> (l -= 8)) % 256);
            }
         }
    }
    return r;
}
30
Sniper

php.js プロジェクトは、PHPの多くの関数のJavaScript実装を持っています。 base64_encodeとbase64_decodeが含まれています。

11
ceejayoz

これは、javascriptを使用してbase64_encodeおよびbase64_decodeを作成するための最良の方法です。下記のリンクを参照してください。

http://phpjs.org/functions/base64_encode:358

http://phpjs.org/functions/base64_decode:357

10
gautamlakum
function b64_to_utf8( str ) {
  return decodeURIComponent(escape(window.atob( str )));
}

 https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding#The_.22Unicode_Problem.22
9
PPB

誰かがコードゴルフを言ったのですか？ =）

以下は時代に追いついている間私のハンディキャップを改善する私の試みです。あなたの便宜のために供給されています。

function decode_base64(s) {
  var b=l=0, r='',
  m='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
  s.split('').forEach(function (v) {
    b=(b<<6)+m.indexOf(v); l+=6;
    if (l>=8) r+=String.fromCharCode((b>>>(l-=8))&0xff);
  });
  return r;
}

私が実際に行ったのは非同期の実装でしたが、驚いたことに、JQueryの$([]).eachメソッドの実装は非常に同期的であるのに対して、forEachが判明しました。

このような狂気の概念も念頭に置いていたのであれば、0遅延window.setTimeoutはbase64デコードを非同期的に実行し、終了したらその結果でコールバック関数を実行します。

function decode_base64_async(s, cb) {
  setTimeout(function () { cb(decode_base64(s)); }, 0);
}

@Toothbrushは、「配列のような文字列にインデックスを付ける」ことを提案し、splitを取り除きました。このルーチンは本当に変わっているようで、それがどれほど互換性があるのか​​わからないが、それは別のバーディーに当たるのでそれを持ってみましょう。

function decode_base64(s) {
  var b=l=0, r='',
  m='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
  [].forEach.call(s, function (v) {
    b=(b<<6)+m.indexOf(v); l+=6;
    if (l>=8) r+=String.fromCharCode((b>>>(l-=8))&0xff);
  });
  return r;
}

配列としてのJavaScript文字列に関するより多くの情報を見つけようとしている間、私は文字列をステップスルーするために/./g正規表現を使用してこのプロのヒントにつまずいた。これにより、文字列を所定の位置に置き換え、戻り変数を保持する必要がなくなるため、コードサイズがさらに縮小されます。

function decode_base64(s) {
  var b=l=0,
  m='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
  return s.replace(/./g, function (v) {
    b=(b<<6)+m.indexOf(v); l+=6;
    return l<8?'':String.fromCharCode((b>>>(l-=8))&0xff);
  });
}

しかしながら、あなたがもう少し伝統的な何かを探していたならば、おそらく以下はあなたの好みにより近いです。

function decode_base64(s) {
  var b=l=0, r='', s=s.split(''), i,
  m='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
  for (i in s) {
    b=(b<<6)+m.indexOf(s[i]); l+=6;
    if (l>=8) r+=String.fromCharCode((b>>>(l-=8))&0xff);
  }
  return r;
}

末尾のnullの問題はありませんでしたので、これは標準を下回るように削除されましたが、問題がある場合はtrim()またはtrimRight()で簡単に解決できます。

すなわち。

return r.trimRight();

注意：

Unicodeの文字列を生成するためにescapeでデコードできるバイト文字列をUnicodeでdecodeURIComponentにするのが最も簡単な場合、結果はASCIIバイト文字列になります。

function decode_base64_usc(s) {      
  return decodeURIComponent(escape(decode_base64(s)));
}

escapeは廃止予定であるため、escapeまたはString.fromCharCodeを必要とせずに、Unicodeを直接サポートするように関数を変更することができます。これにより、URIデコードの準備ができた%エスケープ文字列を生成できます。

function decode_base64(s) {
  var b=l=0,
  m='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
  return decodeURIComponent(s.replace(/./g, function (v) {
    b=(b<<6)+m.indexOf(v); l+=6;
    return l<8?'':'%'+(0x100+((b>>>(l-=8))&0xff)).toString(16).slice(-2);
  }));
}

nジョイ！

8
nickl-

私はphpjs.orgでJavascriptルーチンを試してみましたが、うまくいきました。

私は最初にRanhiru Coorayが選んだ答えで提案したルーチンを試してみました - http://ntt.cc/2008/01/19/base64-encoder-decoder-with-javascript.html

私はそれらがすべての状況で機能するわけではないことがわかりました。私はこれらのルーチンが失敗するテストケースを書き上げ、GitHubに投稿しました。

https://github.com/scottcarter/base64_javascript_test_data.git

私はまた、著者に警告するためにntt.ccのブログ投稿にコメントを投稿しました（モデレーションを待っています - 記事は古いので、コメントが投稿されるかどうかはわかりません）。

6
Scott Carter

Node.jsでは、簡単な方法でそれを実現できます。

var base64 = 'SGVsbG8gV29ybGQ='
var base64_decode = new Buffer(base64, 'base64').toString('ascii');

console.log(base64_decode); // "Hello World"
1
KARTHIKEYAN.A

ベストプラクティスとパターンを使ってJavaScriptで実装された標準的で安全な暗号化アルゴリズムのための最も普及しているライブラリである CryptoJS からのbas64エンコード/デコードメソッドを使用したいと思います。

1
Dan Dascalescu