How can you encode a string to Base64 in JavaScript?

Posted by Ramesh Singh | Updated on January 19, 2020

If you want encode a string to Base64 in JavaScript? You can use btoa() and atob() to convert to and from base64 encoding.

There appears to be some confusion in the comments regarding what these functions accept/return:

btoa() accepts a “string” where each character represents an 8-bit byte – if you pass a string containing characters that can’t be represented in 8 bits, it will probably break. This isn’t a problem if you’re actually treating the string as a byte array, but if you’re trying to do something else then you’ll have to encode it first.
atob() returns a “string” where each character represents an 8-bit byte – that is, its value will be between 0 and 0xff. This does not mean it’s ASCII – presumably if you’re using this function at all, you expect to be working with binary data and not text.

Example: Encode a string to Base64 in JavaScript

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

/**

* Base64 encode / decode

**/

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;

}

If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.

How can you encode a string to Base64 in JavaScript?

Example: Encode a string to Base64 in JavaScript

Related Questions & Answers

Solved Programs