¿Cómo se puede codificar una cadena en Base64 en JavaScript?

Resuelto username asked hace 16 años • 33 respuestas

Tengo un script PHP que puede codificar una imagen PNG en una cadena Base64.

Me gustaría hacer lo mismo usando JavaScript. Sé cómo abrir archivos, pero no estoy seguro de cómo codificarlos. No estoy acostumbrado a trabajar con datos binarios.

username avatar Oct 29 '08 20:10 username
Aceptado

Puede utilizar btoa()y atob()para convertir hacia y desde la codificación base64.

Parece haber cierta confusión en los comentarios con respecto a lo que estas funciones aceptan/devuelven, así que...

  • btoa()acepta una "cadena" donde cada carácter representa un byte de 8 bits; si pasa una cadena que contiene caracteres que no se pueden representar en 8 bits, probablemente se romperá . Esto no es un problema si en realidad estás tratando la cadena como una matriz de bytes, pero si estás intentando hacer algo más, primero tendrás que codificarla.

  • atob()devuelve una "cadena" donde cada carácter representa un byte de 8 bits, es decir, su valor estará entre 0y 0xff. Esto no significa que sea ASCII; presumiblemente, si está utilizando esta función, esperará trabajar con datos binarios y no con texto.

Ver también:

  • ¿Cómo cargo datos de imágenes binarias usando Javascript y XMLHttpRequest?

La mayoría de los comentarios aquí están desactualizados. Probablemente puedas usar ambos btoa()y atob(), a menos que admitas navegadores realmente obsoletos.

Chequea aquí:

  • https://caniuse.com/?search=atob
  • https://caniuse.com/?search=btoa
Shog9 avatar Oct 29 '2008 15:10 Shog9

De aquí :

/**
*
*  Base64 encode / decode
*  http://www.webtoolkit.info/
*
**/
var Base64 = {

    // private property
    _keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",

    // public method for encoding
    encode : function (input) {
        var output = "";
        var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
        var i = 0;

        input = Base64._utf8_encode(input);

        while (i < input.length) {

            chr1 = input.charCodeAt(i++);
            chr2 = input.charCodeAt(i++);
            chr3 = input.charCodeAt(i++);

            enc1 = chr1 >> 2;
            enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
            enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
            enc4 = chr3 & 63;

            if (isNaN(chr2)) {
                enc3 = enc4 = 64;
            } else if (isNaN(chr3)) {
                enc4 = 64;
            }

            output = output +
            this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +
            this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
        }
        return output;
    },

    // public method for decoding
    decode : function (input) {
        var output = "";
        var chr1, chr2, chr3;
        var enc1, enc2, enc3, enc4;
        var i = 0;

        input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");

        while (i < input.length) {

            enc1 = this._keyStr.indexOf(input.charAt(i++));
            enc2 = this._keyStr.indexOf(input.charAt(i++));
            enc3 = this._keyStr.indexOf(input.charAt(i++));
            enc4 = this._keyStr.indexOf(input.charAt(i++));

            chr1 = (enc1 << 2) | (enc2 >> 4);
            chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
            chr3 = ((enc3 & 3) << 6) | enc4;

            output = output + String.fromCharCode(chr1);

            if (enc3 != 64) {
                output = output + String.fromCharCode(chr2);
            }
            if (enc4 != 64) {
                output = output + String.fromCharCode(chr3);
            }
        }

        output = Base64._utf8_decode(output);

        return output;
    },

    // private method for UTF-8 encoding
    _utf8_encode : function (string) {
        string = string.replace(/\r\n/g,"\n");
        var utftext = "";

        for (var n = 0; n < string.length; n++) {

            var c = string.charCodeAt(n);

            if (c < 128) {
                utftext += String.fromCharCode(c);
            }
            else if((c > 127) && (c < 2048)) {
                utftext += String.fromCharCode((c >> 6) | 192);
                utftext += String.fromCharCode((c & 63) | 128);
            }
            else {
                utftext += String.fromCharCode((c >> 12) | 224);
                utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                utftext += String.fromCharCode((c & 63) | 128);
            }
        }
        return utftext;
    },

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

        while ( i < utftext.length ) {

            c = utftext.charCodeAt(i);

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

Además, la búsqueda de "codificación JavaScript base64" muestra muchas otras opciones, y la anterior fue la primera.

Sunny Milenov avatar Oct 29 '2008 13:10 Sunny Milenov