如何在JavaScript中将字符串编码为Base64?

我有一个PHP脚本,可以将PNG图像编码为Base64字符串。

我想用JavaScript做同样的事情。我知道如何打开文件,但我不确定如何进行编码。我不习惯使用二进制数据。

1818467 次浏览

从这里开始

/****  Base64 encode / decode*  http://www.webtoolkit.info/***/var Base64 = {
// private property_keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
// public method for encodingencode : 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 decodingdecode : 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;}}

此外,搜索“JavaScript bas64编码”会出现很多其他选项,上面是第一个。

您可以使用#0#1来转换到Base64编码。

关于这些函数接受/返回什么的评论中似乎有些混乱,所以…

  • btoa()接受一个“字符串”,其中每个字符代表一个8位字节-如果您传递的字符串包含无法用8位表示的字符,它可能会破裂。这不是问题如果您实际上将字符串视为字节数组,但如果您尝试执行其他操作,则必须先对其进行编码。

  • atob()返回一个“字符串”,其中每个字符代表一个8位字节-也就是说,它的值将在00xff之间。这并不意味着它是ASCII-大概如果您使用此函数,您希望使用二进制数据而不是文本。

另见:


这里的大多数注释都已经过时了。你可以同时使用btoa()atob(),除非你支持真正过时的浏览器。

检查这里:

桑尼的密码很棒,除了它在Internet Explorer 7中因引用“this”而中断。通过将此类引用替换为“Base64”来修复它:

var Base64 = {// private property_keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
// public method for encodingencode : 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 decodingdecode : 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(/\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;}}

_utf8_decode的两个实现中都有几个错误。由于var语句的使用中断,c1c2被分配为全局变量,而c3根本没有初始化或声明。

它可以工作,但这些变量将覆盖在此函数之外具有相同名称的任何现有变量。

这是一个不会这样做的版本:

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

要使Base64编码的字符串URL友好,在JavaScript中,您可以这样做:

// if this is your Base64 encoded stringvar str = 'VGhpcyBpcyBhbiBhd2Vzb21lIHNjcmlwdA==';
// make URL friendly:str = str.replace(/\+/g, '-').replace(/\//g, '_').replace(/\=+$/, '');
// reverse to original encodingstr = (str + '===').slice(0, str.length + (str.length % 4));str = str.replace(/-/g, '+').replace(/_/g, '/');

看看这个小提琴:http://jsfiddle.net/magikMaker/7bjaT/

您可以使用btoa(到Base64)和atob(从Base64)。

对于Internet Explorer 9及以下版本,请尝试jquery-bas64插件:

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

基本上,我刚刚清理了的原始代码,所以JSLint没有那么多抱怨,我把注释中标记为私有的方法变成了私有的。我还在自己的项目中添加了两个需要的方法,即decodeToHexencodeFromHex

代码:

var Base64 = (function() {"use strict";
var _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
var _utf8_encode = function (string) {
var utftext = "", c, n;
string = string.replace(/\r\n/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};}());

如果您需要对超文本标记语言图像对象进行编码,您可以编写一个简单的函数,例如:

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 prefixreturn dataURL.replace(/^data:image\/(png|jpg);base64,/, "");// or just return dataURL// return dataURL}

要通过id获取图像的Base64编码:

function getBase64ImageById(id){return getBase64Image(document.getElementById(id));}

更多是这里

请注意,这不适合原始Unicode字符串!请参阅Unicode部分这里

编码语法

var encodedData = window.btoa(stringToEncode);

解码语法

var decodedData = window.atob(encodedData);

我已经手动重写了这些编码和解码方法(十六进制除外),将其转换为模块化格式,以实现跨平台/浏览器兼容性,并具有真正的私有范围,如果由于速度而存在,则使用btoaatob,而不是使用自己的编码:

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

用法:

base64.encode(/* String */);base64.decode(/* String */);
utf8.encode(/* String */);utf8.decode(/* String */);

对于我的项目,我仍然需要支持IE7并使用大输入进行编码。

根据Joe Dydale提出的代码和Marius在评论中的建议,可以通过使用数组而不是字符串构建结果来提高IE7的性能。

下面是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("");};

好吧,如果您使用的是Dojo。它为我们提供了直接编码或解码到Base64的方法。

试试这个:

要使用dojox.encoding.base64对字节数组进行编码:

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

要解码Base64编码的字符串:

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

我宁愿使用CryptoJS中的Base64编码/解码方法,这是使用最佳实践和模式在JavaScript中实现的标准和安全加密算法的最流行库。

下面是一个用于window.atob+window.btoa的缩略的Poly填充:

(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})})();
(function (root, factory) {if (typeof define === 'function' && define.amd) {// AMD. Register as an anonymous module.define([], function() {factory(root);});} else factory(root);// node.js has always supported base64 conversions, while browsers that support// web workers support base64 too, but you may never know.})(typeof exports !== "undefined" ? exports : this, function(root) {if (root.atob) {// Some browsers' implementation of atob doesn't support whitespaces// in the encoded string (notably, IE). This wraps the native atob// in a function that strips the whitespaces.// The original function can be retrieved in atob.originaltry {root.atob(" ");} catch(e) {root.atob = (function(atob) {var func = function(string) {return atob(String(string).replace(/[\t\n\f\r ]+/g, ""));};func.original = atob;return func;})(root.atob);}return;}
// base64 character set, plus padding character (=)var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",// Regular expression to check formal correctness of base64 encoded stringsb64re = /^(?:[A-Za-z\d+\/]{4})*?(?:[A-Za-z\d+\/]{2}(?:==)?|[A-Za-z\d+\/]{3}=?)?$/;
root.btoa = function(string) {string = String(string);var bitmap, a, b, c,result = "", i = 0,rest = string.length % 3; // To determine the final padding
for (; i < string.length;) {if ((a = string.charCodeAt(i++)) > 255|| (b = string.charCodeAt(i++)) > 255|| (c = string.charCodeAt(i++)) > 255)throw new TypeError("Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.");
bitmap = (a << 16) | (b << 8) | c;result += b64.charAt(bitmap >> 18 & 63) + b64.charAt(bitmap >> 12 & 63)+ b64.charAt(bitmap >> 6 & 63) + b64.charAt(bitmap & 63);}
// If there's need of padding, replace the last 'A's with equal signsreturn rest ? result.slice(0, rest - 3) + "===".substring(rest) : result;};
root.atob = function(string) {// atob can work with strings with whitespaces, even inside the encoded part,// but only \t, \n, \f, \r and ' ', which can be stripped.string = String(string).replace(/[\t\n\f\r ]+/g, "");if (!b64re.test(string))throw new TypeError("Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.");
// Adding the padding if missing, for semplicitystring += "==".slice(2 - (string.length & 3));var bitmap, result = "", r1, r2, i = 0;for (; i < string.length;) {bitmap = b64.indexOf(string.charAt(i++)) << 18 | b64.indexOf(string.charAt(i++)) << 12| (r1 = b64.indexOf(string.charAt(i++))) << 6 | (r2 = b64.indexOf(string.charAt(i++)));
result += r1 === 64 ? String.fromCharCode(bitmap >> 16 & 255): r2 === 64 ? String.fromCharCode(bitmap >> 16 & 255, bitmap >> 8 & 255): String.fromCharCode(bitmap >> 16 & 255, bitmap >> 8 & 255, bitmap & 255);}return result;};});

完整版本https://github.com/MaxArt2501/base64-js/blob/master/base64.js

这是@user850789的AngularJS工厂版本:

'use strict';
var ProjectNameBase64Factory = angular.module('project_name.factories.base64', []);
ProjectNameBase64Factory.factory('Base64', function () {var Base64 = {// private property_keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
// public method for encodingencode: 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 decodingdecode: 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(/\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 = 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;});

我需要在我的一个项目中将UTF-8字符串编码为Base64。这里的大多数答案在转换为UTF-8时似乎没有正确处理UTF-16代理对,所以,为了完成,我将发布我的解决方案:

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 stringif (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('');}

请注意,代码没有经过彻底测试。我测试了一些输入,包括strToUTF8Base64('衠衢蠩蠨')之类的东西,并与在线编码工具的输出进行了比较(https://www.base64encode.org/)。

Internet Explorer 10+

// Define the stringvar string = 'Hello World!';
// Encode the Stringvar encodedString = btoa(string);console.log(encodedString); // Outputs: "SGVsbG8gV29ybGQh"
// Decode the Stringvar decodedString = atob(encodedString);console.log(decodedString); // Outputs: "Hello World!"

跨浏览器

// Create Base64 Objectvar 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(/\r\n/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 stringvar string = 'Hello World!';
// Encode the Stringvar encodedString = Base64.encode(string);console.log(encodedString); // Outputs: "SGVsbG8gV29ybGQh"
// Decode the Stringvar decodedString = Base64.decode(encodedString);console.log(decodedString); // Outputs: "Hello World!"

jsFiddle


用Node.js

以下是如何在Node.js中将普通文本编码为bas64:

//Buffer() requires a number, array or string as the first parameter, and an optional encoding type as the second parameter.// The default is "utf8". Possible encoding types are "ascii", "utf8", "ucs2", "base64", "binary", and "hex"var b = Buffer.from('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');

以下是解码bas64编码字符串的方法:

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

用Dojo.js

要使用dojox.encoding.base64对字节数组进行编码:

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

要解码Base64编码的字符串:

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

鲍尔安装角基64

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

虽然需要更多的工作,但如果您想要高性能的原生解决方案,可以使用一些HTML5功能。

如果您可以将数据输入#0,那么您可以使用FileReader.readAsDataURL()函数获取data:// URL并砍掉它的前面以获取Base64数据。

但是,您可能需要进行进一步的处理才能对数据进行urldecode,因为我不确定data:// URL是否对+字符进行了转义,但这应该是非常微不足道的。

这个问题及其答案为我指明了正确的方向。特别是对于Unicode,atobbtoa不能用“vanilla”,而现在一切是Unicode…

直接来自Mozilla,两个很好的函数用于此目的。
使用Unicode和超文本标记语言进行测试:

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"

与使用自定义JavaScript函数的原始Base64解码相比,这些函数将以闪电般的速度执行,因为btoaatob在解释器之外执行。

如果您可以忽略旧的Internet Explorer和旧手机(如iPhone3?),这应该是一个很好的解决方案。

从已接受答案下方的评论(SET和Stefan Steiger)中,这里是如何在不需要库的情况下将字符串编码/解码到Base64的快速摘要。

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

纯JavaScript演示

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;}
<div><input type="text" /></div><button id="btnConv">Convert</button><button id="btnDeConv">DeConvert</button>

.

jQuery演示(使用jQuery库进行显示,但不用于编码/解码)

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>

另见:

Base64-MDN Web文档
确定JavaScript中的字符串是否在Base64中

您可以使用window.btoawindow.atob

const encoded = window.btoa('Alireza Dezfoolian'); // encode a stringconst decoded = window.atob(encoded); // decode the string

可能使用MDN的方式可以最好地完成您的工作…也接受Unicode…使用以下两个简单的函数:

// UCS-2 string to Base64 encoded ASCIIfunction utoa(str) {return window.btoa(unescape(encodeURIComponent(str)));}// Base64 encoded ASCII to UCS-2 stringfunction 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!"

对于较新的浏览器,将Uint8Array编码为字符串,并将字符串解码为Uint8Array。

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

Node.js您可以使用以下代码将string、Buffer或Uint8Array编码为string,并将string、Buffer或Uint8Array解码为Buffer。

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

这是atob()btoa() JavaScript内置函数中的直播演示

<!DOCTYPE html><html><head><style>textarea{width:30%;height:100px;}</style><script>// encode string to base64function encode(){var txt = document.getElementById("txt1").value;var result = btoa(txt);document.getElementById("txt2").value = result;}// decode base64 back to original stringfunction 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>

使用js-bas64库作为

btoa()不支持emoji

var str = "I was funny 😂";console.log("Original string:", str);
var encodedStr = Base64.encode(str)console.log("Encoded string:", encodedStr);
var decodedStr = Base64.decode(encodedStr)console.log("Decoded string:", decodedStr);
<script src="https://cdn.jsdelivr.net/npm/js-base64@2.5.2/base64.min.js"></script>

您可以在浏览器中使用btoa()/atob(),但需要一些改进,如此处https://base64tool.com/uncaught-domexception-btoa-on-window/和此处https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/btoa所述,以支持UTF字符串!

没有btoa中间步骤的JavaScript(没有库)

在问题标题中,您写的是字符串转换,但在问题中您谈论的是二进制数据(图片),因此这里有一个函数,它从PNG图片二进制数据开始进行适当的转换(详细信息和反转转换是这里)。

在此输入图片描述

function bytesArrToBase64(arr) {const abc = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"; // base64 alphabetconst bin = n => n.toString(2).padStart(8,0); // convert num to 8-bit binary stringconst l = arr.lengthlet result = '';
for(let i=0; i<=(l-1)/3; i++) {let c1 = i*3+1>=l; // case when "=" is on endlet c2 = i*3+2>=l; // case when "=" is on endlet chunk = bin(arr[3*i]) + bin(c1? 0:arr[3*i+1]) + bin(c2? 0:arr[3*i+2]);let r = chunk.match(/.{1,6}/g).map((x,j)=> j==3&&c2 ? '=' :(j==2&&c1 ? '=':abc[+('0b'+x)]));result += r.join('');}
return result;}


// TEST
const pic = [ // PNG binary data0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00, 0x00, 0x00, 0x0d,0x49, 0x48, 0x44, 0x52, 0x00, 0x00, 0x00, 0x10, 0x00, 0x00, 0x00, 0x10,0x08, 0x06, 0x00, 0x00, 0x00, 0x1f, 0xf3, 0xff, 0x61, 0x00, 0x00, 0x00,0x01, 0x73, 0x52, 0x47, 0x42, 0x00, 0xae, 0xce, 0x1c, 0xe9, 0x00, 0x00,0x01, 0x59, 0x69, 0x54, 0x58, 0x74, 0x58, 0x4d, 0x4c, 0x3a, 0x63, 0x6f,0x6d, 0x2e, 0x61, 0x64, 0x6f, 0x62, 0x65, 0x2e, 0x78, 0x6d, 0x70, 0x00,0x00, 0x00, 0x00, 0x00, 0x3c, 0x78, 0x3a, 0x78, 0x6d, 0x70, 0x6d, 0x65,0x74, 0x61, 0x20, 0x78, 0x6d, 0x6c, 0x6e, 0x73, 0x3a, 0x78, 0x3d, 0x22,0x61, 0x64, 0x6f, 0x62, 0x65, 0x3a, 0x6e, 0x73, 0x3a, 0x6d, 0x65, 0x74,0x61, 0x2f, 0x22, 0x20, 0x78, 0x3a, 0x78, 0x6d, 0x70, 0x74, 0x6b, 0x3d,0x22, 0x58, 0x4d, 0x50, 0x20, 0x43, 0x6f, 0x72, 0x65, 0x20, 0x35, 0x2e,0x34, 0x2e, 0x30, 0x22, 0x3e, 0x0a, 0x20, 0x20, 0x20, 0x3c, 0x72, 0x64,0x66, 0x3a, 0x52, 0x44, 0x46, 0x20, 0x78, 0x6d, 0x6c, 0x6e, 0x73, 0x3a,0x72, 0x64, 0x66, 0x3d, 0x22, 0x68, 0x74, 0x74, 0x70, 0x3a, 0x2f, 0x2f,0x77, 0x77, 0x77, 0x2e, 0x77, 0x33, 0x2e, 0x6f, 0x72, 0x67, 0x2f, 0x31,0x39, 0x39, 0x39, 0x2f, 0x30, 0x32, 0x2f, 0x32, 0x32, 0x2d, 0x72, 0x64,0x66, 0x2d, 0x73, 0x79, 0x6e, 0x74, 0x61, 0x78, 0x2d, 0x6e, 0x73, 0x23,0x22, 0x3e, 0x0a, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x3c, 0x72, 0x64,0x66, 0x3a, 0x44, 0x65, 0x73, 0x63, 0x72, 0x69, 0x70, 0x74, 0x69, 0x6f,0x6e, 0x20, 0x72, 0x64, 0x66, 0x3a, 0x61, 0x62, 0x6f, 0x75, 0x74, 0x3d,0x22, 0x22, 0x0a, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,0x20, 0x20, 0x20, 0x78, 0x6d, 0x6c, 0x6e, 0x73, 0x3a, 0x74, 0x69, 0x66,0x66, 0x3d, 0x22, 0x68, 0x74, 0x74, 0x70, 0x3a, 0x2f, 0x2f, 0x6e, 0x73,0x2e, 0x61, 0x64, 0x6f, 0x62, 0x65, 0x2e, 0x63, 0x6f, 0x6d, 0x2f, 0x74,0x69, 0x66, 0x66, 0x2f, 0x31, 0x2e, 0x30, 0x2f, 0x22, 0x3e, 0x0a, 0x20,0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x3c, 0x74, 0x69, 0x66,0x66, 0x3a, 0x4f, 0x72, 0x69, 0x65, 0x6e, 0x74, 0x61, 0x74, 0x69, 0x6f,0x6e, 0x3e, 0x31, 0x3c, 0x2f, 0x74, 0x69, 0x66, 0x66, 0x3a, 0x4f, 0x72,0x69, 0x65, 0x6e, 0x74, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x3e, 0x0a, 0x20,0x20, 0x20, 0x20, 0x20, 0x20, 0x3c, 0x2f, 0x72, 0x64, 0x66, 0x3a, 0x44,0x65, 0x73, 0x63, 0x72, 0x69, 0x70, 0x74, 0x69, 0x6f, 0x6e, 0x3e, 0x0a,0x20, 0x20, 0x20, 0x3c, 0x2f, 0x72, 0x64, 0x66, 0x3a, 0x52, 0x44, 0x46,0x3e, 0x0a, 0x3c, 0x2f, 0x78, 0x3a, 0x78, 0x6d, 0x70, 0x6d, 0x65, 0x74,0x61, 0x3e, 0x0a, 0x4c, 0xc2, 0x27, 0x59, 0x00, 0x00, 0x00, 0xf9, 0x49,0x44, 0x41, 0x54, 0x38, 0x11, 0x95, 0x93, 0x3d, 0x0a, 0x02, 0x41, 0x0c,0x85, 0xb3, 0xb2, 0x85, 0xb7, 0x10, 0x6c, 0x04, 0x1b, 0x0b, 0x4b, 0x6f,0xe2, 0x76, 0x1e, 0xc1, 0xc2, 0x56, 0x6c, 0x2d, 0xbc, 0x85, 0xde, 0xc4,0xd2, 0x56, 0xb0, 0x11, 0xbc, 0x85, 0x85, 0xa0, 0xfb, 0x46, 0xbf, 0xd9,0x30, 0x33, 0x88, 0x06, 0x76, 0x93, 0x79, 0x93, 0xf7, 0x92, 0xf9, 0xab,0xcc, 0xec, 0xd9, 0x7e, 0x7f, 0xd9, 0x63, 0x33, 0x8e, 0xf9, 0x75, 0x8c,0x92, 0xe0, 0x34, 0xe8, 0x27, 0x88, 0xd9, 0xf4, 0x76, 0xcf, 0xb0, 0xaa,0x45, 0xb2, 0x0e, 0x4a, 0xe4, 0x94, 0x39, 0x59, 0x0c, 0x03, 0x54, 0x14,0x58, 0xce, 0xbb, 0xea, 0xdb, 0xd1, 0x3b, 0x71, 0x75, 0xb9, 0x9a, 0xe2,0x7a, 0x7d, 0x36, 0x3f, 0xdf, 0x4b, 0x95, 0x35, 0x09, 0x09, 0xef, 0x73,0xfc, 0xfa, 0x85, 0x67, 0x02, 0x3e, 0x59, 0x55, 0x31, 0x89, 0x31, 0x56,0x8c, 0x78, 0xb6, 0x04, 0xda, 0x23, 0x01, 0x01, 0xc8, 0x8c, 0xe5, 0x77,0x87, 0xbb, 0x65, 0x02, 0x24, 0xa4, 0xad, 0x82, 0xcb, 0x4b, 0x4c, 0x64,0x59, 0x14, 0xa0, 0x72, 0x40, 0x3f, 0xbf, 0xe6, 0x68, 0xb6, 0x9f, 0x75,0x08, 0x63, 0xc8, 0x9a, 0x09, 0x02, 0x25, 0x32, 0x34, 0x48, 0x7e, 0xcc,0x7d, 0x10, 0xaf, 0xa6, 0xd5, 0xd2, 0x1a, 0x3d, 0x89, 0x38, 0xf5, 0xf1,0x14, 0xb4, 0x69, 0x6a, 0x4d, 0x15, 0xf5, 0xc9, 0xf0, 0x5c, 0x1a, 0x61,0x8a, 0x75, 0xd1, 0xe8, 0x3a, 0x2c, 0x41, 0x5d, 0x70, 0x41, 0x20, 0x29,0xf9, 0x9b, 0xb1, 0x37, 0xc5, 0x4d, 0xfc, 0x45, 0x84, 0x7d, 0x08, 0x8f,0x89, 0x76, 0x54, 0xf1, 0x1b, 0x19, 0x92, 0xef, 0x2c, 0xbe, 0x46, 0x8e,0xa6, 0x49, 0x5e, 0x61, 0x89, 0xe4, 0x05, 0x5e, 0x4e, 0xa4, 0x5c, 0x10,0x6e, 0x9f, 0xfc, 0x5b, 0x00, 0x00, 0x00, 0x00, 0x49, 0x45, 0x4e, 0x44,0xae, 0x42, 0x60, 0x82];
let b64pic = bytesArrToBase64(pic);myPic.src = "data:image/png;base64,"+b64pic;msg.innerHTML = "Base64 encoded pic data:<br>" + b64pic;
img { zoom: 10; image-rendering: pixelated; }#msg { word-break: break-all; }
<img id="myPic"><code id="msg"></code>

如果你使用Node.js,你可以这样做:

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

当我使用

btoa("☸☹☺☻☼☾☿"))

我得到:

要编码的字符串包含字符在Latin1范围之外。

我发现留档Unicode字符串提供了如下解决方案。

function toBinary(string) {const codeUnits = new Uint16Array(string.length);for (let i = 0; i < codeUnits.length; i++) {codeUnits[i] = string.charCodeAt(i);}return String.fromCharCode(...new Uint8Array(codeUnits.buffer));}
function fromBinary(binary) {const bytes = new Uint8Array(binary.length);for (let i = 0; i < bytes.length; i++) {bytes[i] = binary.charCodeAt(i);}return String.fromCharCode(...new Uint16Array(bytes.buffer));}
const myString = "☸☹☺☻☼☾☿"// console.log(btoa(myString)) // Error InvalidCharacterError: The string to be encoded contains characters outside of the Latin1 range.const converted = toBinary(myString)const encoded = btoa(converted)console.log(encoded)
const decoded = atob(encoded)const original = fromBinary(decoded)console.log(original);

这里的所有解决方案在某些情况下似乎都失败了,并且很难理解。特别是对于非拉丁语言,如阿拉伯

这是一个解码UTF-16的简短解决方案

//decodes utf-16 characters such as ARABIC, URDU,PASHTO textfunction decodeBase64(s) {var percentEncodedStr = atob(s).split('').map(function (c) {return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);}).join('');return decodeURIComponent(percentEncodedStr);}

2022弃用警告更新

我在我的vscode上看到了弃用警告

This function is only provided for compatibility with legacy web platform APIs and should never be used in new code,because they use strings to represent binary data and predate the introduction of typed arrays in JavaScript.For code running using Node.js APIs,converting between base64-encoded strings and binary data should be performed using Buffer.from(str, 'base64') andbuf.toString('base64').

搜索多一点后,我发现这个问题说它不是弃用

https://github.com/microsoft/TypeScript/issues/45566

所以Web JS上弃用警告的解决方案,使用window.btoa警告将消失。

如果有人想在TypeScript中将字符串编码为Base64

我调整了彼得·莫特森的回答并添加了类型(在需要的地方)

const Base64 = {

_keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
// added type string to inputencode: function(input: string) {let output = "";let chr1, chr2, chr3, enc1, enc2, enc3, enc4;let 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;},// added type string to input_utf8_encode: function(input: string) {input= input.replace(/\r\n/g, "\n");let utftext = "";
for (let n = 0; n < input.length; n++) {
let c = input.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;},} 
// function that consumes that Base64.encode functionconst encode = ( cipher : string) => {
const encodedString: string = Base64.encode(cipher)
return encodedString;}
console.log(encode('Hello World!'))

jsfiddle link

这是编码为base 64url的帮助函数:

base64url (s) {var to64url = btao(s);// Replace non-url compatible chars with base64url standard chars and remove leading =return to64url.replace(/\+/g, '_').replace(/\//g, '-').replace(/=+$/g, '');}

如果你想简单快速地编码base 64而不关心可能的兼容性问题,你可以使用turboCommons库。只需下载缩小的js文件并编写以下代码:

<script src="../yourpathtothelibrary/turbocommons-es5.js"></script>
<script>var ConversionUtils = org_turbocommons.ConversionUtils;
ConversionUtils.stringToBase64('hello');</script>

你可以在这里查看库如何完成的代码:

https://github.com/edertone/TurboCommons/blob/master/TurboCommons-TS/src/main/ts/utils/ConversionUtils.ts

更多信息在这里:

https://turboframework.org/en/blog/2022-10-26/encode-decode-base64-strings-javascript-typescript-php

您可以在此处在线测试:

https://turboframework.org/en/app/stringutils/base64-encode