将base64字符串转换为ArrayBuffer

Question

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

我发现这些链接很有趣，但他们没有帮助我：

ArrayBuffer to base64 encoded string

这是相反的转换，从ArrayBuffer到base64，而不是相反

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

这看起来不错，但我无法弄清楚如何使用代码。

是否有一种简单的（可能是原生的）方式进行转换？谢谢

Answer 1

试试这个：

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

Answer 2

使用TypedArray.from：

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

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

Answer 3

由于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); 

Answer 4

刚刚找到base64-arraybuffer，一个小的npm软件包，使用率极高，上个月下载量为500万（2017-08）。

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

对于那些寻找最佳标准解决方案的人来说，可能就是这样。

Answer 5

Javascript是一个很好的开发环境，所以它似乎很奇怪，但它没有为这个小问题提供解决方案。本页其他地方提供的解决方案可能很慢。这是我的解决方案。它采用内置功能，解码base64图像和声音数据网址。

var req = new XMLHttpRequest;
req.open('GET', "data:application/octet;base64," + base64Data);
req.responseType = 'arraybuffer';
req.onload = function fileLoaded(e)
{
   var byteArray = new Int8Array(e.target.response);
   // var shortArray = new Int16Array(e.target.response);
   // var unsignedShortArray = new Int16Array(e.target.response);
   // etc.
}
req.send();

如果基本65字符串格式错误，则发送请求将失败。

mime类型（应用程序/八位字节）可能是不必要的。

镀铬测试。应该在其他浏览器中工作。

Answer 6

异步解决方案，当数据很大时，它会更好：

// base64 to buffer
function base64ToBufferAsync(base64) {
  var dataUrl = "data:application/octet-binary;base64," + base64;

  fetch(dataUrl)
    .then(res => res.arrayBuffer())
    .then(buffer => {
      console.log("base64 to buffer: " + new Uint8Array(buffer));
    })
}

// buffer to base64
function bufferToBase64Async( buffer ) {
    var blob = new Blob([buffer], {type:'application/octet-binary'});    
    console.log("buffer to blob:" + blob)

    var fileReader = new FileReader();
    fileReader.onload = function() {
      var dataUrl = fileReader.result;
      console.log("blob to dataUrl: " + dataUrl);

      var base64 = dataUrl.substr(dataUrl.indexOf(',')+1)      
      console.log("dataUrl to base64: " + base64);
    };
    fileReader.readAsDataURL(blob);
}

Answer 7

const str = "dGhpcyBpcyBiYXNlNjQgc3RyaW5n"
const encoded = new TextEncoder().encode(str) // is Uint8Array
const buf = encoded.buffer // is ArrayBuffer