我要评论前置概念
- arraybuffer：就像一个巨大的数字水池，里面装满了 0 和 1。
- base64：一种字符编码格式，它用 64 个字符
（a-z, a-z, 0-9, +, /）来表示数据。 - textdecoder：就像一个神奇的翻译器，能够将水池里的数字变成普通的文字。
- btoa：这个函数就像一个魔术师，能将普通文字变成 base64 编码。
问题引入：将图片数据转为 base64 时遇到意外
在前端开发中，我们经常需要处理从服务器获取的图片数据。有时，我们需要将这些数据（arraybuffer ）转换为 base64 格式，以便进一步处理，或者进一步向其他位置传播。
通常我们会使用如下代码：
const base64 = btoa(string.fromcharcode.apply(null, new uint8array(arraybuffer)));
工作原理
new uint8array(arraybuffer):- 这一步将 arraybuffer 转换为 uint8array。
- 可以将其想象为把一大桶水（arraybuffer）倒入一排整齐的小杯子（uint8array）中，每个杯子恰好装 8 位（1字节）的数据。
string.fromcharcode.apply(null, ...):-
string.fromcharcode 是一个方法，它接受一系列 unicode 值，并返回由这些值组成的字符串。 -
.apply(null, ...) 的作用是将 uint8array 中的所有元素作为独立参数传递给string.fromcharcode。这就像是试图一次性抓住所有的小水杯。
-
btoa(...):- 最后，
btoa 函数将生成的字符串编码为 base64。
- 最后，
这种方法对于小型 arraybuffer 来说非常高效，因为它简洁且直接。
然而，当我们尝试将较大的图片转换为 base64 字符串时，这段代码就会抛出以下错误：
rangeerror: maximum call stack size exceeded
为什么会栈溢出呢，问题出在 string.fromcharcode.apply() 方法上。当处理大型 arraybuffer 时，这种方法试图一次性将所有数据作为参数传递给函数，导致超出了 javascript 的调用栈限制。
想象你正在尝试将一个巨大的拼图（arraybuffer）快速组装起来：
- 首先，你把所有拼图块整齐地排列在桌上（创建 uint8array）。
- 然后，你试图一次性抓起所有拼图块（
apply 方法），想要立即将它们组合成完整的图像（string.fromcharcode）。 - 最后，你要给这幅拼好的图像加上特殊的装裱（
btoa 转换为 base64）。
问题在于，当拼图太大时，你的手（javascript 的调用栈）无法一次抓住所有的拼图块，导致它们洒落一地（栈溢出错误）。
那么，如何优雅地解决这个问题，实现大型 arraybuffer 到 base64 的转换呢？让我们探索几种有效的方法。
解决方案详解
使用
reduce 方法这种方法就像用一个小勺子，一勺一勺地舀水。虽然不会溢出，但可能会花很长时间。
const base64 = btoa(new uint8array(arraybuffer).reduce((data, byte) => data + string.fromcharcode(byte), ''));
工作原理：
- 首先，将 arraybuffer 转换为 uint8array，就像把水倒入一个个小杯子里。
- 然后，使用
reduce 方法遍历每个字节（每个小杯子），将其转换为字符。 - 每次迭代都会创建一个新的字符串，就像把每个小杯子的水倒入一个逐渐变大的容器中。
- 最后，使用
btoa 将得到的字符串转换为 base64。
为什么慢：
- 字符串拼接操作（
data + string.fromcharcode(byte)）在每次迭代中都会创建一个新的字符串。 - 对于大型 arraybuffer，这意味着创建成千上万个中间字符串，就像在倒水过程中不断更换容器。
- 这种频繁的内存分配和释放操作会显著降低性能。
现代方法：textdecoder + btoa
这种方法就像拥有一台高效的自动灌装机。它能迅速将整桶水（arraybuffer）直接灌入瓶子（base64字符串），既快速又安全。
const text = new textdecoder().decode(new uint8array(arraybuffer)); const base64 = btoa(text);
工作原理：
- textdecoder 像一个智能转换器，能够一次性将整个 uint8array 转换为字符串。
- 这个过程就像是用一根大管子，直接将水从桶中抽出并过滤。
- 然后，
btoa 函数作为最后的包装步骤，将字符串转换为 base64 编码。
为什么快：
- textdecoder 是在底层实现的，利用了浏览器的原生优化。就像一台精心设计的工业级设备。
- 它能够一次性处理整个数组，避免了频繁的字符串创建和拼接操作。
在实际编程中，对于小型数据，两种方法的差异可能不明显。但当处理大型 arraybuffer（比如高分辨率图片数据）时，现代方法的优势就会非常明显，可能会将处理时间从秒级降低到毫秒级。
兼容代码
const arraybuffertobase64 = (buffer) => {
if (typeof textdecoder !== 'undefined' && typeof btoa !== 'undefined') {
return btoa(new textdecoder().decode(new uint8array(buffer)));
} else {
return btoa(new uint8array(buffer).reduce((data, byte) => data + string.fromcharcode(byte), ''));
}
}
这个函数首先检查环境是否支持 textdecoder 和 btoa。如果支持，就使用高性能的现代方法；如果不支持，则回退到使用 reduce 方法，确保最大兼容性。
结语
在处理 arraybuffer 到 base64 的转换时，现代的 textdecoder + btoa 方法通常是最佳选择，但在需要更广泛兼容性的情况下，可以考虑使用 reduce 方法作为备选。
以上就是javascript实现arraybuffer到base64的转换的详细内容，更多关于javascript arraybuffer转base64的资料请关注代码网其它相关文章！
发表评论