小开

如果所需的只是 base64编码器的 JS 实现，以便可以发送数据回来，那么可以尝试使用 btoa函数。

b64enc = btoa(uint);

关于 btoa 的一些简短说明——它是非标准的，所以浏览器不会强制支持它。然而，大多数浏览器是这样做的。至少大的浏览器是这样。 atob是相反的转换。

如果您需要一个不同的实现，或者您发现浏览器根本不知道您在说什么，那么为 JS 搜索 base64编码器不会太难。

不知道为什么，我公司的网站上好像有三个。

小开

如果你的数据可能包含多字节序列(而不是普通的 ASCII 序列) ，并且你的浏览器有文本解码器，那么你应该使用它来解码你的数据(为 TextDecder 指定所需的编码) :

var u8 = new Uint8Array([65, 66, 67, 68]);
var decoder = new TextDecoder('utf8');
var b64encoded = btoa(decoder.decode(u8));

如果您需要支持没有文本解码器的浏览器(目前只支持 IE 和 Edge) ，那么最好的选择是使用文本解码器填充。

如果您的数据包含纯 ASCII (而不是多字节 Unicode/UTF-8) ，那么有一个使用 String.fromCharCode的简单替代方案，应该得到相当普遍的支持:

var ascii = new Uint8Array([65, 66, 67, 68]);
var b64encoded = btoa(String.fromCharCode.apply(null, ascii));

要将 base64字符串解码回 Uint8Array:

var u8_2 = new Uint8Array(atob(b64encoded).split("").map(function(c) {
return c.charCodeAt(0); }));

如果你有甚大天线阵缓冲区，那么应用程序可能会失败，你可能需要组块缓冲区(基于@RohitSengar 发布的内容)。同样，请注意，只有当缓冲区仅包含非多字节 ASCII 字符时，这才是正确的:

function Uint8ToString(u8a){
var CHUNK_SZ = 0x8000;
var c = [];
for (var i=0; i < u8a.length; i+=CHUNK_SZ) {
c.push(String.fromCharCode.apply(null, u8a.subarray(i, i+CHUNK_SZ)));
}
return c.join("");
}
// Usage
var u8 = new Uint8Array([65, 66, 67, 68]);
var b64encoded = btoa(Uint8ToString(u8));

小开

function Uint8ToBase64(u8Arr){
var CHUNK_SIZE = 0x8000; //arbitrary number
var index = 0;
var length = u8Arr.length;
var result = '';
var slice;
while (index < length) {
slice = u8Arr.subarray(index, Math.min(index + CHUNK_SIZE, length));
result += String.fromCharCode.apply(null, slice);
index += CHUNK_SIZE;
}
return btoa(result);
}

如果有非常大的 Uint8Array，则可以使用此函数。这是针对 Javascript 的，对于 FileReaderreadAsArrayBuffer 非常有用。

小开

非常简单的 JavaScript 解决方案和测试！

ToBase64 = function (u8) {
return btoa(String.fromCharCode.apply(null, u8));
}


FromBase64 = function (str) {
return atob(str).split('').map(function (c) { return c.charCodeAt(0); });
}


var u8 = new Uint8Array(256);
for (var i = 0; i < 256; i++)
u8[i] = i;


var b64 = ToBase64(u8);
console.debug(b64);
console.debug(FromBase64(b64));

小开

Npm 安装 google-close-library —— save

require("google-closure-library");
goog.require('goog.crypt.base64');


var result =goog.crypt.base64.encodeByteArray(Uint8Array.of(1,83,27,99,102,66));
console.log(result);

$node index.js将向控制台写入 AVMbY2Y = 。

小开

这里有一个 JS 函数:

这个函数是必需的，因为 Chrome 不接受 base64编码的字符串在 pushManager.ordering 中作为 applicationServerKey 的值 Https://bugs.chromium.org/p/chromium/issues/detail?id=802280

function urlBase64ToUint8Array(base64String) {
var padding = '='.repeat((4 - base64String.length % 4) % 4);
var base64 = (base64String + padding)
.replace(/\-/g, '+')
.replace(/_/g, '/');


var rawData = window.atob(base64);
var outputArray = new Uint8Array(rawData.length);


for (var i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
}

小开

如果您正在使用 Node.js，那么您可以使用这段代码将 Uint8Array 转换为 base64

var u8 = new Uint8Array([65, 66, 67, 68]);
var b64 = Buffer.from(u8).toString('base64');

小开

最佳答案

所有已经提出的解决方案都存在严重的问题。有些解决方案无法在大型数组上工作，有些提供错误的输出，有些在 btoa 调用时抛出错误，如果中间字符串包含多字节字符，有些消耗的内存超过所需。

所以我实现了一个直接转换函数，不管输入是什么都能正常工作。它在我的机器上每秒转换大约500万字节。

Https://gist.github.com/enepomnyaschih/72c423f727d395eeaa09697058238727

/*
MIT License
Copyright (c) 2020 Egor Nepomnyaschih
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/


/*
// This constant can also be computed with the following algorithm:
const base64abc = [],
A = "A".charCodeAt(0),
a = "a".charCodeAt(0),
n = "0".charCodeAt(0);
for (let i = 0; i < 26; ++i) {
base64abc.push(String.fromCharCode(A + i));
}
for (let i = 0; i < 26; ++i) {
base64abc.push(String.fromCharCode(a + i));
}
for (let i = 0; i < 10; ++i) {
base64abc.push(String.fromCharCode(n + i));
}
base64abc.push("+");
base64abc.push("/");
*/
const base64abc = [
"A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M",
"N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z",
"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m",
"n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z",
"0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "+", "/"
];


/*
// This constant can also be computed with the following algorithm:
const l = 256, base64codes = new Uint8Array(l);
for (let i = 0; i < l; ++i) {
base64codes[i] = 255; // invalid character
}
base64abc.forEach((char, index) => {
base64codes[char.charCodeAt(0)] = index;
});
base64codes["=".charCodeAt(0)] = 0; // ignored anyway, so we just need to prevent an error
*/
const base64codes = [
255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,
255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,
255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 62, 255, 255, 255, 63,
52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 255, 255, 255, 0, 255, 255,
255, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,
15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 255, 255, 255, 255, 255,
255, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40,
41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51
];


function getBase64Code(charCode) {
if (charCode >= base64codes.length) {
throw new Error("Unable to parse base64 string.");
}
const code = base64codes[charCode];
if (code === 255) {
throw new Error("Unable to parse base64 string.");
}
return code;
}


export function bytesToBase64(bytes) {
let result = '', i, l = bytes.length;
for (i = 2; i < l; i += 3) {
result += base64abc[bytes[i - 2] >> 2];
result += base64abc[((bytes[i - 2] & 0x03) << 4) | (bytes[i - 1] >> 4)];
result += base64abc[((bytes[i - 1] & 0x0F) << 2) | (bytes[i] >> 6)];
result += base64abc[bytes[i] & 0x3F];
}
if (i === l + 1) { // 1 octet yet to write
result += base64abc[bytes[i - 2] >> 2];
result += base64abc[(bytes[i - 2] & 0x03) << 4];
result += "==";
}
if (i === l) { // 2 octets yet to write
result += base64abc[bytes[i - 2] >> 2];
result += base64abc[((bytes[i - 2] & 0x03) << 4) | (bytes[i - 1] >> 4)];
result += base64abc[(bytes[i - 1] & 0x0F) << 2];
result += "=";
}
return result;
}


export function base64ToBytes(str) {
if (str.length % 4 !== 0) {
throw new Error("Unable to parse base64 string.");
}
const index = str.indexOf("=");
if (index !== -1 && index < str.length - 2) {
throw new Error("Unable to parse base64 string.");
}
let missingOctets = str.endsWith("==") ? 2 : str.endsWith("=") ? 1 : 0,
n = str.length,
result = new Uint8Array(3 * (n / 4)),
buffer;
for (let i = 0, j = 0; i < n; i += 4, j += 3) {
buffer =
getBase64Code(str.charCodeAt(i)) << 18 |
getBase64Code(str.charCodeAt(i + 1)) << 12 |
getBase64Code(str.charCodeAt(i + 2)) << 6 |
getBase64Code(str.charCodeAt(i + 3));
result[j] = buffer >> 16;
result[j + 1] = (buffer >> 8) & 0xFF;
result[j + 2] = buffer & 0xFF;
}
return result.subarray(0, result.length - missingOctets);
}


export function base64encode(str, encoder = new TextEncoder()) {
return bytesToBase64(encoder.encode(str));
}


export function base64decode(str, decoder = new TextDecoder()) {
return decoder.decode(base64ToBytes(str));
}

小开

纯 JS-没有字符串中间步(没有 btoa)

在下面的解决方案中，我省略了字符串的转换:

连接3个字节(3个数组元素) ，得到24位
将24位拆分为4个6位数(从0到63取值)
用这些数字作为64进制字母表的索引
当输入字节数组时长度不除以3，然后加上 =或 ==的结果

下面的解决方案适用于3字节的块，因此对于大型数组很有用。将 base64转换为二进制阵列(不包括 atob)的类似解决方案是给你

function bytesArrToBase64(arr) {
const abc = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"; // base64 alphabet
const bin = n => n.toString(2).padStart(8,0); // convert num to 8-bit binary string
const l = arr.length
let result = '';


for(let i=0; i<=(l-1)/3; i++) {
let c1 = i*3+1>=l; // case when "=" is on end
let c2 = i*3+2>=l; // case when "=" is on end
let 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
// ----------


let test = "Alice's Adventure in Wondeland.";
let testBytes = [...test].map(c=> c.charCodeAt(0) );


console.log('test string:', test);
console.log('bytes:', JSON.stringify(testBytes));
console.log('btoa            ', btoa(test));
console.log('bytesArrToBase64', bytesArrToBase64(testBytes));

小心！

如果您想转换 STRING (而不是字节数组) ，请注意 btoa通常将失败放在 utf8字符串上，如 btoa("💩")(一个字符可能由多个字节编码)。在这种情况下，您必须首先在正确的方式中将这种字符串转换为字节，然后使用上述解决方案，例如:

function bytesArrToBase64(arr) {
const abc = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"; // base64 alphabet
const bin = n => n.toString(2).padStart(8,0); // convert num to 8-bit binary string
const l = arr.length
let result = '';


for(let i=0; i<=(l-1)/3; i++) {
let c1 = i*3+1>=l; // case when "=" is on end
let c2 = i*3+2>=l; // case when "=" is on end
let 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
// ----------


let test = "💩";   // base64: 8J+SqQ==
let testBytes = new TextEncoder().encode(test);


console.log('test string      :', test);
console.log('bytes            :', JSON.stringify([...testBytes]));
console.log('bytesArrToBase64 :', bytesArrToBase64(testBytes));




try {
console.log('test btoa :', btoa(test));
} catch (e) {
console.error('btoa fails during conversion!', e.message)
}

在 铬合金103.0.5060.134(arm64) ，狩猎旅行15.2，火狐103.0.1(64位) ，边缘103.0.1264.77(arm64)和 Node-js v12.16.1上测试的2022-08-04片段

小开

使用以下命令将 uint8数组转换为 base64编码的字符串

function arrayBufferToBase64(buffer) {
var binary = '';
var bytes = [].slice.call(new Uint8Array(buffer));
bytes.forEach((b) => binary += String.fromCharCode(b));
return window.btoa(binary);
};

小开

本机浏览器解决方案 (快!)

使用本机浏览器功能，用 任意数据(不一定是 UTF-8)对一个 Uint8Array进行 base64编码:

const base64_arraybuffer = async (data) => {
// Use a FileReader to generate a base64 data URI
const base64url = await new Promise((r) => {
const reader = new FileReader()
reader.onload = () => r(reader.result)
reader.readAsDataURL(new Blob([data]))
})


/*
The result looks like
"data:application/octet-stream;base64,<your base64 data>",
so we split off the beginning:
*/
return base64url.split(",", 2)[1]
}


// example use:
await base64_arraybuffer(new Uint8Array([1,2,3,100,200]))

因为这是使用本机浏览器特性，所以性能是最佳的。它可以转换250 MB 每秒在我的计算机(基准脚本) ，使其约 比接受的答案快50倍。

小开

MDN 的文件涵盖了一切。

因为已经有了二进制数据，所以可以将 Uint8Array 转换为 ASCII 字符串并对该字符串调用 btoa。

function encodeBase64Bytes(bytes: Uint8Array): string {
return btoa(
bytes.reduce((acc, current) => acc + String.fromCharCode(current), "")
);
}

当您需要编码任意的 JS 字符串时，btoa的复杂性就会出现，这些字符串可能占用一个以上的字节，例如 "👍"。要处理任意的 JS 字符串(UTF-16) ，必须首先将字符串转换为单字节表示形式。这不适用于此用例，因为您已经有了二进制数据。

链接的 MDN 文档介绍了编码时的转换(以及解码的相互步骤)。

小开

由于 btoa只处理字符串，我们可以用 String.fromCharCode将 Uint8Array 字符串化:

const toBase64 = uInt8Array => btoa(String.fromCharCode(...uInt8Array));

小开

在浏览器中你可以做到:

Uint8Array —— > Base64

btoa(String.fromCharCode.apply(null,new Uint8Array([1,2,3,255])))

Base64—— > Uint8Array

new Uint8Array([...atob('AQID/w==')].map(c=>c.charCodeAt(c)))

小开

这里有一个不使用 “飞溅操作员”的解决方案:

function uint8ArrayFromBase64(s) {
// 1. Call atob()
var b = atob(s), b_at = b.charCodeAt.bind(b);
// 2. Construct Uint8Array from String
return Uint8Array.from({
[Symbol.iterator]() {
var end = b.length, i = 0;
return ({
next() {
return ({value: b_at(i++), done: i>end});
}
});
}
});
}


function uint8ArrayToBase64(a) {
// 1. Preprocess Uint8Array into String
// (TODO: fix RAM usage from intermediate array creation)
var a_s = Array.prototype.map.call(a, c => String.fromCharCode(c)).join(String());
// 2. Call btoa()
return btoa(a_s);
}

Demo:


<form action="javascript:" onsubmit="(({target:form,submitter:{value:action}})=>{eval(action)(form)})(event)">
<input name="b64" value="AAAAB3NzaC1yc2E=">
<button type="submit" value="({b64:{value:s},u8a:e})=>{e.value=`[${uint8ArrayFromBase64(s)}]`;}">Convert to Uint8Array</button>
<br />
<input name="u8a" value="">
<button type="submit" value="({u8a:{value:x},b64:e})=>{e.value=(uint8ArrayToBase64(x.replace(/(?:^\[|\]$)/g, '').split(',')));}">Convert to Base64</button>
</form>

如何将 uint8数组转换为 base64编码字符串？

纯 JS-没有字符串中间步(没有 btoa)

小心！

本机浏览器解决方案 (快!)