Agfdhyk

From here:

/**

*

*  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(/rn/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;

}



}

Also, search on "javascript base64 encoding" turns a lot of other options, the above was the first one.

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

Cross-Browser

// Create Base64 Object

var Base64={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=Base64._utf8_encode(e);while(f<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9+/=]/g,"");while(f<e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=Base64._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/rn/g,"n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}}



// Define the string

var string = 'Hello World!';



// Encode the String

var encodedString = Base64.encode(string);

console.log(encodedString); // Outputs: "SGVsbG8gV29ybGQh"



// Decode the String

var decodedString = Base64.decode(encodedString);

console.log(decodedString); // Outputs: "Hello World!"

jsFiddle

with Node.js

Here is how you encode normal text to base64 in Node.js:

//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');

And here is how you decode base64 encoded strings:

var b = new Buffer('SmF2YVNjcmlwdA==', 'base64')

var s = b.toString();

with Dojo.js

To encode an array of bytes using dojox.encoding.base64:

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

To decode a base64-encoded string:

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

bower install angular-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=');

}]);

Sunny's code is great except it breaks in IE7 because of references to "this". Fixed by replacing such references with "Base64":

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 +

        Base64._keyStr.charAt(enc1) + Base64._keyStr.charAt(enc2) +

        Base64._keyStr.charAt(enc3) + Base64._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 = Base64._keyStr.indexOf(input.charAt(i++));

        enc2 = Base64._keyStr.indexOf(input.charAt(i++));

        enc3 = Base64._keyStr.indexOf(input.charAt(i++));

        enc4 = Base64._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(/rn/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;

}

}

You can use btoa (to base-64) and atob (from base-64).

For IE 9 and below, try the jquery-base64 plugin:

$.base64.encode("this is a test");

$.base64.decode("dGhpcyBpcyBhIHRlc3Q=");

There's a couple of bugs in both implementations of _utf8_decode. c1 and c2 are assigned as global variables due to broken use of the var statement, and c3 is not initialized or declared at all.

It works, but these variables will overwrite any existing ones with the same name outside this function.

Here's a version that won't do this:

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

}

From the comments (by SET and Stefan Steiger) below the accepted answer, here is a quick summary of how to encode/decode a string to/from base64 without need of a library.

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

b64 = btoa(unescape(encodeURIComponent(str)));

str = decodeURIComponent(escape(window.atob(b64)));

Demo

(uses jQuery library, but not for encode/decode)

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>

I +1'ed Sunny's answer, but I wanted to contribute back a few changes I made for my own project in case anyone should find it useful. Basically I've just cleaned up the original code a little so JSLint doesn't complain quite as much, and I made the methods marked as private in the comments actually private. I also added two methods I needed in my own project, namely decodeToHex and encodeFromHex.

The code:

var Base64 = (function() {

    "use strict";



    var _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";



    var _utf8_encode = function (string) {



        var utftext = "", c, n;



        string = string.replace(/rn/g,"n");



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



            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;

    };



    var _utf8_decode = function (utftext) {

        var string = "", i = 0, 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;

    };



    var _hexEncode = function(input) {

        var output = '', i;



        for(i = 0; i < input.length; i++) {

            output += input.charCodeAt(i).toString(16);

        }



        return output;

    };



    var _hexDecode = function(input) {

        var output = '', i;



        if(input.length % 2 > 0) {

            input = '0' + input;

        }



        for(i = 0; i < input.length; i = i + 2) {

            output += String.fromCharCode(parseInt(input.charAt(i) + input.charAt(i + 1), 16));

        }



        return output;

    };



    var encode = function (input) {

        var output = "", chr1, chr2, chr3, enc1, enc2, enc3, enc4, i = 0;



        input = _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 += _keyStr.charAt(enc1);

            output += _keyStr.charAt(enc2);

            output += _keyStr.charAt(enc3);

            output += _keyStr.charAt(enc4);



        }



        return output;

    };



    var decode = function (input) {

        var output = "", chr1, chr2, chr3, enc1, enc2, enc3, enc4, i = 0;



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



        while (i < input.length) {



            enc1 = _keyStr.indexOf(input.charAt(i++));

            enc2 = _keyStr.indexOf(input.charAt(i++));

            enc3 = _keyStr.indexOf(input.charAt(i++));

            enc4 = _keyStr.indexOf(input.charAt(i++));



            chr1 = (enc1 << 2) | (enc2 >> 4);

            chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);

            chr3 = ((enc3 & 3) << 6) | enc4;



            output += String.fromCharCode(chr1);



            if (enc3 !== 64) {

                output += String.fromCharCode(chr2);

            }

            if (enc4 !== 64) {

                output += String.fromCharCode(chr3);

            }



        }



        return _utf8_decode(output);

    };



    var decodeToHex = function(input) {

        return _hexEncode(decode(input));

    };



    var encodeFromHex = function(input) {

        return encode(_hexDecode(input));

    };



    return {

        'encode': encode,

        'decode': decode,

        'decodeToHex': decodeToHex,

        'encodeFromHex': encodeFromHex

    };

}());

To make a Base64 encoded String URL friendly, in JavaScript you could do something like this:

// if this is your Base64 encoded string

var str = 'VGhpcyBpcyBhbiBhd2Vzb21lIHNjcmlwdA=='; 



// make URL friendly:

str = str.replace(/+/g, '-').replace(///g, '_').replace(/=+$/, '');



// reverse to original encoding

str = (str + '===').slice(0, str.length + (str.length % 4));

str = str.replace(/-/g, '+').replace(/_/g, '/');

See also this Fiddle: http://jsfiddle.net/magikMaker/7bjaT/

I have re-wrote by hand, these encoding and decoding methods with the exception of the hexadecimal one into a modular format for cross-platform / browser compatibility and also with real private scoping, and uses btoa and atob if they exist due to speed rather than utilize its own encoding:

https://gist.github.com/Nijikokun/5192472

Usage:

base64.encode(/* String */);

base64.decode(/* String */);



utf8.encode(/* String */);

utf8.decode(/* String */);

This question and it's answers pointed me to the right direction.

Especially with unicode atob and btoa can not be used "vanilla" and these days EVERYTHING is unicode ..

Directly from Mozilla, two nice functions for this purpose (tested with unicode and html tags inside)

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"

These functions will perform lightning fast in comparison to raw base64 decoding using a custom javascript function as btoa and atob are executed outside the interpreter.

If you can ignore old IE and old mobile phones (like iphone 3?) this should be a good solution.

Please note that this is not suitable for raw Unicode strings! See Unicode section here.

Syntax for encoding

var encodedData = window.btoa(stringToEncode);

Syntax for decoding

var decodedData = window.atob(encodedData);

if you need to encode HTML image object,
you can write simple function like:

function getBase64Image(img) {  

  var canvas = document.createElement("canvas");  

  canvas.width = img.width;  

  canvas.height = img.height;  

  var ctx = canvas.getContext("2d");  

  ctx.drawImage(img, 0, 0);  

  var dataURL = canvas.toDataURL("image/png");  

  // escape data:image prefix

  return dataURL.replace(/^data:image/(png|jpg);base64,/, "");  

  // or just return dataURL

  // return dataURL

}  

To get base64 of image by id:

function getBase64ImageById(id){  

  return getBase64Image(document.getElementById(id));  

} 

more here

Contributing with a minified polyfill for window.atob + window.btoa that I'm currently using.

(function(){function t(t){this.message=t}var e="undefined"!=typeof exports?exports:this,r="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";t.prototype=Error(),t.prototype.name="InvalidCharacterError",e.btoa||(e.btoa=function(e){for(var o,n,a=0,i=r,c="";e.charAt(0|a)||(i="=",a%1);c+=i.charAt(63&o>>8-8*(a%1))){if(n=e.charCodeAt(a+=.75),n>255)throw new t("'btoa' failed: The string to be encoded contains characters outside of the Latin1 range.");o=o<<8|n}return c}),e.atob||(e.atob=function(e){if(e=e.replace(/=+$/,""),1==e.length%4)throw new t("'atob' failed: The string to be decoded is not correctly encoded.");for(var o,n,a=0,i=0,c="";n=e.charAt(i++);~n&&(o=a%4?64*o+n:n,a++%4)?c+=String.fromCharCode(255&o>>(6&-2*a)):0)n=r.indexOf(n);return c})})();

I'd rather use the bas64 encode/decode methods from CryptoJS, the most popular library for standard and secure cryptographic algorithms implemented in JavaScript using best practices and patterns.

Here is an AngularJS Factory version of @user850789's one:

'use strict';



var ProjectNameBase64Factory = angular.module('project_name.factories.base64', );



ProjectNameBase64Factory.factory('Base64', function () {

    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 +

                         Base64._keyStr.charAt(enc1) + Base64._keyStr.charAt(enc2) +

                         Base64._keyStr.charAt(enc3) + Base64._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 = Base64._keyStr.indexOf(input.charAt(i++));

                enc2 = Base64._keyStr.indexOf(input.charAt(i++));

                enc3 = Base64._keyStr.indexOf(input.charAt(i++));

                enc4 = Base64._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(/rn/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 = 0, c2 = 0, c3 = 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;

        }

    };

    return Base64;

});

I needed encoding of an UTF-8 string as base64 for a project of mine. Most of the answers here don't seem to properly handle UTF-16 surrogate pairs when converting to UTF-8 so, for completion sake, I will post my solution:

function strToUTF8Base64(str) {



    function decodeSurrogatePair(hi, lo) {

        var resultChar = 0x010000;

        resultChar += lo - 0xDC00;

        resultChar += (hi - 0xD800) << 10;

        return resultChar;

    }



    var bytes = [0, 0, 0];

    var byteIndex = 0;

    var result = ;



    function output(s) {

        result.push(s);

    }



    function emitBase64() {



        var digits =

                'ABCDEFGHIJKLMNOPQRSTUVWXYZ' +

                'abcdefghijklmnopqrstuvwxyz' +

                '0123456789+/';



        function toDigit(value) {

            return digits[value];

        }



        // --Byte 0--    --Byte 1--    --Byte 2--

        // 1111  1122    2222  3333    3344  4444



        var d1 = toDigit(bytes[0] >> 2);

        var d2 = toDigit(

            ((bytes[0] & 0x03) << 4) |

            (bytes[1] >> 4));

        var d3 = toDigit(

            ((bytes[1] & 0x0F) << 2) |

            (bytes[2] >> 6));

        var d4 = toDigit(

            bytes[2] & 0x3F);



        if (byteIndex === 1) {

            output(d1 + d2 + '==');

        }

        else if (byteIndex === 2) {

            output(d1 + d2 + d3 + '=');

        }

        else {

            output(d1 + d2 + d3 + d4);

        }

    }



    function emit(chr) {

        bytes[byteIndex++] = chr;

        if (byteIndex == 3) {

            emitBase64();

            bytes[0] = 0;

            bytes[1] = 0;

            bytes[2] = 0;

            byteIndex = 0;

        }

    }



    function emitLast() {

        if (byteIndex > 0) {

            emitBase64();

        }

    }



    // Converts the string to UTF8:



    var i, chr;

    var hi, lo;

    for (i = 0; i < str.length; i++) {

        chr = str.charCodeAt(i);



        // Test and decode surrogate pairs in the string

        if (chr >= 0xD800 && chr <= 0xDBFF) {

            hi = chr;

            lo = str.charCodeAt(i + 1);

            if (lo >= 0xDC00 && lo <= 0xDFFF) {

                chr = decodeSurrogatePair(hi, lo);

                i++;

            }

        }



        // Encode the character as UTF-8.

        if (chr < 0x80) {

            emit(chr);

        }

        else if (chr < 0x0800) {

            emit((chr >> 6) | 0xC0);

            emit(((chr >> 0) & 0x3F) | 0x80);

        }

        else if (chr < 0x10000) {

            emit((chr >> 12) | 0xE0);

            emit(((chr >>  6) & 0x3F) | 0x80);

            emit(((chr >>  0) & 0x3F) | 0x80);

        }

        else if (chr < 0x110000) {

            emit((chr >> 18) | 0xF0);

            emit(((chr >> 12) & 0x3F) | 0x80);

            emit(((chr >>  6) & 0x3F) | 0x80);

            emit(((chr >>  0) & 0x3F) | 0x80);

        }

    }



    emitLast();



    return result.join('');

}

Note that the code is not thoroughly tested. I tested some inputs, including things like strToUTF8Base64('衠衢蠩蠨') and compared with the output of an online encoding tool (https://www.base64encode.org/).

For newer browsers to encode Uint8Array to string, and decode string to Uint8Array.

const base64 = {

    decode: s => Uint8Array.from(atob(s), c => c.charCodeAt(0)),

    encode: b => btoa(String.fromCharCode(...new Uint8Array(b)))

};

For Node.js you can use the following to encode string, Buffer, or Uint8Array to string, and decode from string, Buffer, or Uint8Array to Buffer.

const base64 = {

    decode: s => Buffer.from(s, 'base64'),

    encode: b => Buffer.from(b).toString('base64')

};

For my project I still need to support IE7 and work with large input to encode.

Based on the code proposed by Joe Dyndale and as suggested in comment by Marius, it is possible to improve the performance with IE7 by constructing the result with an array instead of a string.

Here is the example for encode:

var encode = function (input) {

    var output = , chr1, chr2, chr3, enc1, enc2, enc3, enc4, i = 0;



    input = _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.push(_keyStr.charAt(enc1));

        output.push(_keyStr.charAt(enc2));

        output.push(_keyStr.charAt(enc3));

        output.push(_keyStr.charAt(enc4));



    }



    return output.join("");

};

While a bit more work, if you want a high performance native solution there are some HTML5 functions you can use.

If you can get your data into a Blob, then you can use the FileReader.readAsDataURL() function to get a data:// URL and chop off the front of it to get at the base64 data.

You may have to do further processing however to urldecode the data, as I'm not sure whether + characters are escaped or not for the data:// URL, but this should be pretty trivial.

Well, if you are using dojo, it gives us direct way to encode or decode into base64.

Try this:-

To encode an array of bytes using dojox.encoding.base64:

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

To decode a base64-encoded string:

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

Here is a LIVE DEMO of atob() and btoa() JS built in functions:

<!DOCTYPE html>

<html>

  <head>

    <style>

      textarea{

        width:30%;

        height:100px;

      }

    </style>

    <script>

      // encode string to base64

      function encode()

      {

        var txt = document.getElementById("txt1").value;

        var result = btoa(txt);

        document.getElementById("txt2").value = result;

      }

      // decode base64 back to original string

      function decode()

      {

        var txt = document.getElementById("txt3").value;

        var result = atob(txt);

        document.getElementById("txt4").value = result;

      }

    </script>

  </head>

  <body>

    <div>

      <textarea id="txt1">Some text to decode

      </textarea>

    </div>

    <div>

      <input type="button" id="btnencode" value="Encode" onClick="encode()"/>

    </div>

    <div>

      <textarea id="txt2">

      </textarea>

    </div>

    <br/>

    <div>

      <textarea id="txt3">U29tZSB0ZXh0IHRvIGRlY29kZQ==

      </textarea>

    </div>

    <div>

      <input type="button" id="btndecode" value="Decode" onClick="decode()"/>

    </div>

    <div>

      <textarea id="txt4">

      </textarea>

    </div>

  </body>

</html>

You can use window.btoa and window.atob...

const encoded = window.btoa('Alireza Dezfoolian'); // encode a string

const decoded = window.atob(encoded); // decode the string

Probably using the way which MDN is can do your job the best... Also accepting unicode... using these two simple functions:

// ucs-2 string to base64 encoded ascii

function utoa(str) {

    return window.btoa(unescape(encodeURIComponent(str)));

}

// base64 encoded ascii to ucs-2 string

function atou(str) {

    return decodeURIComponent(escape(window.atob(str)));

}

// Usage:

utoa('✓ à la mode'); // 4pyTIMOgIGxhIG1vZGU=

atou('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"



utoa('I u2661 Unicode!'); // SSDimaEgVW5pY29kZSE=

atou('SSDimaEgVW5pY29kZSE='); // "I ♡ Unicode!"