web-dev-qa-db-ger.com

Base64-Codierung und -Decodierung in clientseitigem Javascript

Gibt es in JavaScript Methoden, mit denen eine Zeichenfolge mithilfe der base64-Codierung codiert und decodiert werden kann?

214
Mo.

Einige Browser wie Firefox, Chrome, Safari, Opera und IE10 + können Base64 nativ verarbeiten. Schauen Sie sich diese Stackoverflow-Frage an. Es verwendet btoa() und atob() Funktionen .

Für serverseitiges JavaScript gibt es ein btoa-Paket für Node.JS .

Wenn Sie sich für eine Cross-Browser-Lösung entscheiden, gibt es vorhandene Bibliotheken wie CryptoJS oder Code wie:

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

Bei letzterem müssen Sie die Funktion gründlich auf Cross-Browser-Kompatibilität testen. Und Fehler wurde bereits gemeldet .

171
Ranhiru Cooray

In Gecko/WebKit-basierten Browsern (Firefox, Chrome und Safari) und Opera können Sie btoa () und atob () verwenden.

Ursprüngliche Antwort: Wie kann eine Zeichenfolge in JavaScript in Base64 kodiert werden?

62
nyuszika7h

Internet Explorer 10 oder höher

// 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!"

Cross-Browser

Umgeschriebene und modularisierte UTF-8- und Base64-Javascript-Codierungsbibliotheken/-Module für AMD, CommonJS, Nodejs und Browser. Browserübergreifend kompatibel.


mit Node.js

So codieren Sie normalen Text in Node.js in 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');

Und so dekodieren Sie base64-kodierte Zeichenfolgen:

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

mit Dojo.js

So codieren Sie ein Array von Bytes mit dojox.encoding.base64:

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

So dekodieren Sie eine Base64-kodierte Zeichenfolge:

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

bower installieren Winkel-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=');
}]);

Aber wie?

Wenn Sie mehr darüber erfahren möchten, wie base64 generell und insbesondere in JavaScript kodiert wird, würde ich diesen Artikel empfehlen: Informatik in JavaScript: Base64-Kodierung

42
davidcondrey

Hier ist eine verschärfte Version von Sniper's Post. Es wird davon ausgegangen, dass die Base64-Zeichenfolge ohne Wagenrücklauf gut ausgeformt ist. Diese Version beseitigt ein paar Schleifen, fügt den &0xff-Fix von Yaroslav hinzu, beseitigt nachfolgende Nullen sowie etwas Code-Golf.

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;
};
36
broc.seib

Kurze und schnelle Base64-JavaScript-Decodierungsfunktion ohne Ausfallsicherheit:

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

Das Projekt php.js enthält JavaScript - Implementierungen vieler Funktionen von PHP. base64_encode und base64_decode sind enthalten.

11
ceejayoz

Dies ist der beste Weg, um base64_encode und base64_decode mit Javascript zu verwenden. Siehe unten.

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

8
PPB

Hat jemand Code Golf gesagt? =)

Das Folgende ist mein Versuch, mein Handicap zu verbessern und gleichzeitig die Zeit einzuhalten. Geliefert für Ihre Bequemlichkeit.

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;
}

Was ich eigentlich wollte war eine asynchrone Implementierung und zu meiner Überraschung stellte sich heraus, dass forEach im Gegensatz zu der Implementierung der JQuery-Methode $([]).each sehr synchron ist.

Wenn Sie auch solche verrückten Vorstellungen hatten, würde eine 0-Verzögerung window.setTimeout die base64-Decodierung asynchron ausführen und die Callback-Funktion anschließend mit dem Ergebnis ausführen.

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

@Toothbrush schlug vor, "einen String wie ein Array zu indizieren" und die Variable split zu entfernen. Diese Routine scheint sehr seltsam und nicht sicher, wie kompatibel sie sein wird, aber sie trifft einen anderen Birdie, also lassen wir ihn haben.

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;
}

Bei dem Versuch, weitere Informationen zu JavaScript-Zeichenfolgen als Array zu finden, stolperte ich über diesen Pro-Tipp mit einem /./g-Regex, um einen String zu durchlaufen. Dadurch wird die Codegröße noch weiter reduziert, indem die Zeichenfolge ersetzt wird und keine Rückgabevariable mehr vorhanden ist.

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);
  });
}

Wenn Sie jedoch etwas traditionelleres suchen, ist das Folgende vielleicht mehr nach Ihrem Geschmack.

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;
}

Ich hatte das nachstehende Null-Problem nicht, also wurde dieses entfernt, um unter dem gleichen Wert zu bleiben, aber es sollte leicht mit einer trim() oder einer trimRight() behoben werden, falls dies vorzuziehen ist, falls dies ein Problem für Sie darstellen sollte.

dh.

return r.trimRight();

Hinweis:

Das Ergebnis ist ein ASCII-Byte-String. Wenn Sie Unicode benötigen, ist es am einfachsten, escape den Byte-String zu verwenden, der dann mit decodeURIComponent dekodiert werden kann, um den Unicode-String zu erzeugen.

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

Da escape veraltet ist, können wir unsere Funktion so ändern, dass Unicode direkt unterstützt wird, ohne dass escape oder String.fromCharCode erforderlich sind. Wir können einen %-Escape-String erzeugen, der für die URI-Dekodierung bereit ist.

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);
  }));
}

nJoy!

8
nickl-

Ich habe die Javascript-Routinen bei phpjs.org ausprobiert und sie haben gut funktioniert.

Ich habe zuerst die Routinen aus der ausgewählten Antwort von Ranhiru Cooray ausprobiert - http://ntt.cc/2008/01/19/base64-encoder-decoder-with-javascript.html

Ich stellte fest, dass sie nicht unter allen Umständen funktionierten. Ich habe einen Testfall geschrieben, bei dem diese Routinen fehlschlagen, und an GitHub gesendet unter:

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

Ich habe auch einen Kommentar in den Blog-Beitrag auf ntt.cc geschrieben, um den Autor darauf aufmerksam zu machen (wartet auf Moderation - der Artikel ist alt, also nicht sicher, ob der Kommentar gepostet wird).

6
Scott Carter

Ich verwende lieber die bas64-Kodierungs-/Dekodierungsmethoden von CryptoJS , der beliebtesten Bibliothek für standardmäßige und sichere kryptografische Algorithmen, die in JavaScript unter Verwendung von Best Practices und Mustern implementiert sind.

1
Dan Dascalescu

In Node.js können wir das auf einfache Weise tun 

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

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