Wie kann man in JavaScript eine Zeichenkette in Base64 kodieren?

Question

Ich habe ein PHP-Skript, das ein PNG-Bild in einen Base64-String kodieren kann.

Ich möchte das Gleiche mit JavaScript machen. Ich weiß, wie man Dateien öffnet, aber ich bin mir nicht sicher, wie man die Kodierung vornimmt. Ich bin es nicht gewohnt, mit binären Daten zu arbeiten.

Answer 1

Aus den Kommentaren (von SET und Stefan Steiger) unter der akzeptierten Antwort ist hier eine kurze Zusammenfassung, wie man eine Zeichenkette in/aus Base64 kodieren/dekodieren kann, ohne eine Bibliothek zu benötigen.

str = "The quick brown fox jumps over the lazy dog";
b64 = btoa(unescape(encodeURIComponent(str)));
str = decodeURIComponent(escape(window.atob(b64)));

Reine JavaScript-Demo

const input = document.getElementsByTagName('input')[0];
const btnConv = document.getElementById('btnConv');
const btnDeConv = document.getElementById('btnDeConv');

input.value = "The quick brown fox jumps over the lazy dog";

btnConv.addEventListener('click', () => {
  const txt = input.value;
  const b64 = btoa(unescape(encodeURIComponent(txt)));
  input.value = b64;
  btnDeConv.style.display = 'block';
  btnConv.style.display = 'none';
});

btnDeConv.addEventListener('click', () => {
  var b64 = input.value;
  var txt = decodeURIComponent(escape(window.atob(b64)));
  input.value = txt;
  btnConv.style.display = 'block';
  btnDeConv.style.display = 'none';
});

input{width:500px;}
#btnDeConv{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div><input type="text" /></div>
<button id="btnConv">Convert</button>
<button id="btnDeConv">DeConvert</button>

.

jQuery-Demo (verwendet die jQuery-Bibliothek für die Anzeige, aber nicht für die Kodierung/Dekodierung)

str = "The quick brown fox jumps over the lazy dog";

$('input').val(str);

$('#btnConv').click(function(){
  var txt = $('input').val();
  var b64 = btoa(unescape(encodeURIComponent(txt)));
  $('input').val(b64);
  $('#btnDeConv').show();
});
$('#btnDeConv').click(function(){
  var b64 = $('input').val();
  var txt = decodeURIComponent(escape(window.atob(b64)));
  $('input').val(txt);
});

#btnDeConv{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" />
<button id="btnConv">Convert</button>
<button id="btnDeConv">DeConvert</button>

Answer 2

Wenn Sie Node.js verwenden, können Sie dies tun:

let a = Buffer.from('JavaScript').toString('base64');
console.log(a);

let b = Buffer.from(a, 'base64').toString();
console.log(b);

Answer 3

Es gibt einige Fehler in beiden Implementierungen von _utf8_decode . c1 y c2 werden als globale Variablen zugewiesen, da die Verwendung des var Anweisung, und c3 wird nicht initialisiert oder deklariert.

Es funktioniert, aber diese Variablen überschreiben alle vorhandenen Variablen mit demselben Namen außerhalb dieser Funktion.

Hier ist eine Version, bei der dies nicht der Fall ist:

// private method for UTF-8 decoding
_utf8_decode : function (utftext) {
    var string = "";
    var i = 0;
    var c = 0, c1 = 0, c2 = 0;

    while ( i < utftext.length ) {

        c = utftext.charCodeAt(i);

        if (c < 128) {
            string += String.fromCharCode(c);
            i++;
        }
        else if((c > 191) && (c < 224)) {
            c1 = utftext.charCodeAt(i+1);
            string += String.fromCharCode(((c & 31) << 6) | (c1 & 63));
            i += 2;
        }
        else {
            c1 = utftext.charCodeAt(i+1);
            c2 = utftext.charCodeAt(i+2);
            string += String.fromCharCode(((c & 15) << 12) | ((c1 & 63) << 6) | (c2 & 63));
            i += 3;
        }
    }
    return string;
}

Answer 4

Für neuere Browser, um Uint8Array in String zu kodieren und String in Uint8Array zu dekodieren.

const base64 = {
    decode: s => Uint8Array.from(atob(s), c => c.charCodeAt(0)),
    encode: b => btoa(String.fromCharCode(...new Uint8Array(b)))
};

Für Node.js können Sie folgendes verwenden, um string, Buffer oder Uint8Array zu string zu kodieren und von string, Buffer oder Uint8Array zu Buffer zu dekodieren.

const base64 = {
    decode: s => Buffer.from(s, 'base64'),
    encode: b => Buffer.from(b).toString('base64')
};

Answer 5

Diese Frage und ihre Antworten haben mich auf den richtigen Weg gebracht. Vor allem mit Unicode, atob y btoa kann nicht als "Vanille" verwendet werden und heutzutage alles ist Unicode...

Direkt von Mozilla, zwei schöne Funktionen für diesen Zweck.
Getestet mit Unicode und HTML-Tags darin:

function b64EncodeUnicode(str) {
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
        return String.fromCharCode('0x' + p1);
    }));
}

b64EncodeUnicode(' à la mode'); // "4pyTIMOgIGxhIG1vZGU="
b64EncodeUnicode('\n'); // "Cg=="

function b64DecodeUnicode(str) {
    return decodeURIComponent(Array.prototype.map.call(atob(str), function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));
}

b64DecodeUnicode('4pyTIMOgIGxhIG1vZGU='); // " à la mode"
b64DecodeUnicode('Cg=='); // "\n"

Diese Funktionen sind blitzschnell im Vergleich zur rohen Base64-Dekodierung mit einer benutzerdefinierten JavaScript-Funktion wie btoa y atob werden außerhalb des Interpreters ausgeführt.

Wenn Sie den alten Internet Explorer und alte Mobiltelefone (wie das iPhone 3?) ignorieren können, sollte dies eine gute Lösung sein.