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

Question

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

我得到了一个webSocket通信,我收到base64编码的字符串,将其转换为uint8并继续工作,但现在我需要发送回来,我得到了uint8数组,需要将其转换为base64字符串,所以我可以发送它.我该怎么做这个转换？

Answer 1

如果您的数据可能包含多字节序列(不是纯ASCII序列)并且您的浏览器具有TextDecoder,那么您应该使用它来解码数据(指定TextDecoder所需的编码):

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

Run Code Online (Sandbox Code Playgroud)

如果您需要支持没有TextDecoder(当前只有IE和Edge)的浏览器,那么最好的选择是使用TextDecoder polyfill.

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

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

Run Code Online (Sandbox Code Playgroud)

并将base64字符串解码回Uint8Array:

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

Run Code Online (Sandbox Code Playgroud)

如果您有非常大的数组缓冲区,则apply可能会失败,您可能需要对缓冲区进行分块(基于@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));

Run Code Online (Sandbox Code Playgroud)

如果字节数组不是有效的Unicode,则这不起作用. (16认同)
到底为什么要在转为 Base64 之前解码多字节？如果它是二进制数据，则不应将其转换为可打印字符串。 (13认同)
base64字符串或“ Uint8Array”中没有多字节字符。“ TextDecoder”绝对是错误的选择，因为如果您的“ Uint8Array”的字节范围为128..255，则文本解码器会错误地将其转换为unicode字符，这将破坏base64转换器。 (5认同)
这对我来说在Firefox中很有用,但Chrome扼杀了"未捕获的RangeError:超出最大调用堆栈大小"(执行btoa). (4认同)
谢谢.我需要的只是`btoa(String.fromCharCode.apply(null,myArray))` (4认同)
我仍然很困惑这个解决方案被如此广泛地接受。也许它适用于仅 UTF8 字符串，但 base64 的一大优点是它适用于其他数据格式，例如图像、PDF 或二进制 blob。“接受的”解决方案必须对双方都有效。 (4认同)
对于 Uint8Array >127 中的任何值，TextDecoder 解决方案对我来说都失败了。然而，`String.fromCharCode` 工作得很好。 (3认同)
我不明白，问题询问有关将字节数组编码为字符串的问题。没有提到包含 ascii 或 unicode 字符的字节数组。正如其他人提到的，这并不能回答问题，尽管它对于解码文本仍然有用。 (3认同)
@MichaelPaulukonis我的猜测是它实际上是String.fromCharCode.apply导致超出堆栈大小.如果你有一个非常大的Uint8Array,那么你可能需要迭代地构建字符串而不是使用apply来这样做.apply()调用将数组的每个元素作为参数传递给fromCharCode,因此如果数组长度为128000字节,那么您将尝试使用128000个参数进行函数调用,这可能会导致堆栈爆炸. (2认同)
怎么大家都点赞？在大文件上使用 btoa 会引发堆栈溢出错误 (2认同)
不适用于无效 Unicode 的字节数组。使用它会产生错误。 (2认同)

Answer 2

Fon*_*ons 63

本机浏览器解决方案（快！）

Uint8Array使用本机浏览器功能对任意数据（不一定是 UTF-8）进行 base64 编码：

// note: `buffer` arg can be an ArrayBuffer or a Uint8Array
async function bufferToBase64(buffer) {
  // 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([buffer]))
  });
  // remove the `data:...;base64,` part from the start
  return base64url.slice(base64url.indexOf(',') + 1);
}

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

Run Code Online (Sandbox Code Playgroud)

由于这是使用本机浏览器功能，因此性能最佳。它可以在我的计算机上每秒转换 250 MB（基准脚本），使其比接受的答案快约 60 倍。

如何解码结果？ (2认同)
如果性能是您的目标，请考虑 `base64url.substring(base64url.indexOf(',')+1)` (2认同)

Answer 3

Fia*_*eid 37

如果您使用的是 Node.js，那么您可以使用此代码将 Uint8Array 转换为 base64

var b64 = Buffer.from(u8).toString('base64');

Run Code Online (Sandbox Code Playgroud)

解码： `var u8 = new Uint8Array(Buffer.from(b64, 'base64'))` (10认同)
就性能而言，这是比上面的手卷函数更好的答案。 (6认同)
惊人的！谢谢。有史以来最好的答案 (3认同)

Answer 4

Ego*_*hih 24

已经提出的所有解决方案都有严重的问题。一些解决方案无法在大型数组上工作，一些提供错误的输出，如果中间字符串包含多字节字符，一些会在 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));
}

Run Code Online (Sandbox Code Playgroud)

Answer 5

小智 19

非常简单的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));

Run Code Online (Sandbox Code Playgroud)

最干净的解决方案! (4认同)
它在大数据（例如图像）上失败，并显示“RangeError：超出最大调用堆栈大小” (2认同)

Answer 6

Roh*_*gar 17

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

Run Code Online (Sandbox Code Playgroud)

如果你有一个非常大的Uint8Array,你可以使用这个功能.这是针对Javascript的,在FileReader readAsArrayBuffer的情况下可能很有用.

@Jens 二进制数据数组中的多字节 UTF8 编码字符是什么？我们在这里处理的不是 unicode 字符串，而是任意二进制数据，不应将其视为 utf-8 代码点。 (4认同)
有趣的是,在Chrome中我将它计时在一个300kb +的缓冲区上,发现它是以块为单位进行的,就像你要比逐字节一样慢.这让我感到惊讶. (2认同)
这不安全,是吗？如果我的块边界切断了多字节UTF8编码字符,则[fromCharCode()](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode)将不会能够从边界两侧的字节创建合理的字符,不是吗？ (2认同)
@Jens `String.fromCharCode.apply()` 方法无法重现 UTF-8：UTF-8 字符的长度可能从一个字节到四个字节不等，但 `String.fromCharCode.apply()` 会检查 UInt8 段中的 UInt8Array ，因此它错误地假设每个字符正好是一个字节长并且与相邻字符无关。如果输入的 UInt8Array 中编码的字符都恰好在 ASCII（单字节）范围内，它会偶然工作，但不能重现完整的 UTF-8。为此，您需要 TextDecoder 或类似的 [算法](/sf/answers/1566119481/)。 (2认同)

Answer 7

Kam*_*ski 8

纯 JS - 无字符串中间步骤（无 btoa）

在下面的解决方案中，我省略了对字符串的转换。想法如下：

连接 3 个字节（3 个数组元素），得到 24 位
将 24 位拆分为四个 6 位数字（取值从 0 到 63）
使用该数字作为 base64 字母表中的索引
极端情况：当输入字节数组的长度未除以 3 时，然后将=or添加==到结果中

下面的解决方案适用于 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));

Run Code Online (Sandbox Code Playgroud)

警告！

如果您想转换 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)
}

Run Code Online (Sandbox Code Playgroud)

片段于 2022 年 8 月 4 日在以下平台上进行测试：chrome 103.0.5060.134 (arm64)、safari 15.2、firefox 103.0.1 (64 位)、edge 103.0.1264.77 (arm64) 和node-js v12.16.1

归档时间：	12 年，11 月前
查看次数：	71654 次
最近记录：	6 年前