将 base64 字符串转换为 ArrayBuffer

IT技术 javascript arrays base64 arraybuffer
2021-01-14 17:20:57

我需要将 base64 编码字符串转换为 ArrayBuffer。base64 字符串是用户输入,它们将从电子邮件中复制和粘贴,因此在加载页面时它们不存在。如果可能,我想在不向服务器进行 ajax 调用的情况下在 javascript 中执行此操作。

我发现这些链接很有趣,但它们并没有帮助我:

ArrayBuffer 到 base64 编码的字符串

这是关于相反的转换,从 ArrayBuffer 到 base64,而不是相反

http://jsperf.com/json-vs-base64/2

这看起来不错,但我不知道如何使用代码。

是否有一种简单的(可能是原生的)方法来进行转换?谢谢

6个回答

试试这个:

function _base64ToArrayBuffer(base64) {
    var binary_string = window.atob(base64);
    var len = binary_string.length;
    var bytes = new Uint8Array(len);
    for (var i = 0; i < len; i++) {
        bytes[i] = binary_string.charCodeAt(i);
    }
    return bytes.buffer;
}
来自 MDN : Base64 是一组类似的二进制到文本编码方案,通过将二进制数据转换为基数 64 表示,以 ASCII 字符串格式表示二进制数据。Uint8Array 类型数组表示一个 8 位无符号整数数组,我们正在使用数据的 ASCII 表示(这也是一个 8 位表)。
2021-03-18 17:20:57
请向我解释这里到底发生了什么。
2021-03-25 17:20:57
这是不正确的。它允许 javascript 将字节解释为字符串,这会影响实际上是真正二进制的数据。
2021-03-28 17:20:57
嗯,这非常简单,首先我们解码 base64 字符串 (atob),然后我们创建与解码字符串长度相同的 8 位无符号整数的新数组。之后,我们迭代字符串并用字符串中每个字符的 Unicode 值填充数组。
2021-04-08 17:20:57
问题是 a) 不是每个字节序列都是有效的 unicode b) 不是 unicode 中的每个字符都是一个字节所以bytes[i] = binary_string.charCodeAt(i);可能是错误的
2021-04-10 17:20:57

使用TypedArray.from

Uint8Array.from(atob(base64_string), c => c.charCodeAt(0))

要与 Goran.it 答案的 for 循环版本进行比较的性能。

rails 编译器无法处理这个字符串并且失败了ExecJS::RuntimeError: SyntaxError: Unexpected token: operator (>)(导轨 5)
2021-03-14 17:20:57
2021-03-18 17:20:57
这不是数组缓冲区。这是类型化数组。您可以通过.buffer返回属性访问数组缓冲区Uint8Array
2021-03-18 17:20:57
对于喜欢这种单线的人来说,请记住,Uint8Array.from与某些浏览器的兼容性仍然很少。
2021-03-29 17:20:57
@Saites,atobor没有任何问题btoa,你只需要给他们有效的输入。atob需要一个有效的 base64 字符串,否则会抛出错误。并且btoa需要一个有效的字节字符串(也称为二进制字符串),它是一个包含 0-255 范围内字符的字符串。如果您的字符串包含超出该范围的字符,btoa则会引发错误。
2021-04-10 17:20:57

由于 javascript 中的 unicode 问题,Goran.it 的答案不起作用 - https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding

我最终使用了 Daniel Guerrero 博客上给出的函数:http : //blog.danguer.com/2011/10/24/base64-binary-decoding-in-javascript/

功能列在 github 链接上:https : //github.com/danguer/blog-examples/blob/master/js/base64-binary.js

使用这些行

var uintArray = Base64Binary.decode(base64_string);  
var byteArray = Base64Binary.decodeArrayBuffer(base64_string); 
@AlwaysLearning 这意味着它可能被窃听,因为剩余的零字节可能会破坏预期的输出内容。
2021-03-26 17:20:57
decodeArrayBuffer返回一个ArrayBuffer大小总是可以被 3 整除的,我不明白这是设计还是错误。我会在github项目中问。
2021-03-27 17:20:57
你能举一个它不起作用的例子吗?文章讨论了对任意字符串进行编码,其中可能包含 unicode 字符,但根本不适用于atob
2021-04-05 17:20:57
此方法比使用 atob 快 2 倍。
2021-04-06 17:20:57
@ceztko 这可能是(意外)设计的。base64 编码算法采用 3 个字节为一组,并将它们转换为 4 个字符。decode 方法可能会分配一个长度为 base64String.length/4*3 字节的 ArrayBuffer,并且在完成时从不截断任何未使用的字节。
2021-04-07 17:20:57

刚刚找到 base64-arraybuffer,一个使用率非常高的小型 npm 包,上个月(2017-08)下载量为 500 万。

https://www.npmjs.com/package/base64-arraybuffer

对于任何寻找最佳标准解决方案的人来说,这可能就是它。

我将它与音频 API 一起使用,它开箱即用。
2021-04-01 17:20:57

对于 Node.js 用户:

const myBuffer = Buffer.from(someBase64String, 'base64');

myBuffer 将是 Buffer 类型,它是 Uint8Array 的子类。不幸的是, Uint8Array 不是 OP 要求的 ArrayBuffer。但是在操作 ArrayBuffer 时,我几乎总是用 Uint8Array 或类似的东西包装它,所以它应该接近要求的内容。