ArrayBuffer到base64编码的字符串

Question

我需要一种有效的(读取本机)方式将ArrayBuffer转换为需要在多部分帖子上使用的base64字符串.

Answer 1

function _arrayBufferToBase64( buffer ) {
    var binary = '';
    var bytes = new Uint8Array( buffer );
    var len = bytes.byteLength;
    for (var i = 0; i < len; i++) {
        binary += String.fromCharCode( bytes[ i ] );
    }
    return window.btoa( binary );
}

但是,非本机实现更快,例如https://gist.github.com/958841 请参阅http://jsperf.com/encoding-xhr-image-data/6

Answer 2

这对我来说很好:

var base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));

在ES6中,语法更简单:

let base64String = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));

正如注释中所指出的,当ArrayBuffer很大时,这种方法可能会导致某些浏览器出现运行时错误.在任何情况下,确切的大小限制都取决于实现.

Answer 3

OP 没有指定运行环境，但如果您使用 Node.JS，有一个非常简单的方法可以做到这一点。

根据 Node.JS 官方文档： https://nodejs.org/api/buffer.html#buffer_buffers_and_character_encodings

// This step is only necessary if you don't already have a Buffer Object
const buffer = Buffer.from(yourArrayBuffer);

const base64String = buffer.toString('base64');

此外，如果您在 Angular 下运行，该类Buffer也将在浏览器环境中可用。

Answer 4

还有另一种使用Blob和FileReader的异步方式.

我没有测试性能.但这是一种不同的思维方式.

function arrayBufferToBase64( buffer, callback ) {
    var blob = new Blob([buffer],{type:'application/octet-binary'});
    var reader = new FileReader();
    reader.onload = function(evt){
        var dataurl = evt.target.result;
        callback(dataurl.substr(dataurl.indexOf(',')+1));
    };
    reader.readAsDataURL(blob);
}

//example:
var buf = new Uint8Array([11,22,33]);
arrayBufferToBase64(buf, console.log.bind(console)); //"CxYh"

Answer 5

对于那些喜欢它的人来说,这是另一个使用Array.reduce它不会导致堆栈溢出:

var base64 = btoa(
  new Uint8Array(arrayBuffer)
    .reduce((data, byte) => data + String.fromCharCode(byte), '')
);

Answer 6

var blob = new Blob([arrayBuffer])

var reader = new FileReader();
reader.onload = function(event){
   var base64 =   event.target.result
};

reader.readAsDataURL(blob);

Answer 7

我用过这个并且适合我.

function arrayBufferToBase64( buffer ) {
    var binary = '';
    var bytes = new Uint8Array( buffer );
    var len = bytes.byteLength;
    for (var i = 0; i < len; i++) {
        binary += String.fromCharCode( bytes[ i ] );
    }
    return window.btoa( binary );
}



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 8

我对此的建议是不使用原生btoa策略 - 因为它们没有正确编码所有ArrayBuffer的...

重写DOM atob()和btoa()

由于DOMStrings是16位编码的字符串,因此在大多数浏览器中,如果字符超出8位ASCII编码字符的范围,则在Unicode字符串上调用window.btoa将导致字符超出范围异常.

虽然我从未遇到过这个确切的错误,但我发现许多ArrayBuffer我试过编码的编码错误.

我会使用MDN推荐或要点.

• https://github.com/beatgammit/base64-js
• https://gist.github.com/jonleighton/958841

Answer 9

下面是两个简单的函数,用于将Uint8Array转换为Base64 String并再次返回

arrayToBase64String(a) {
    return btoa(String.fromCharCode(...a));
}

base64StringToArray(s) {
    let asciiString = atob(s);
    return new Uint8Array([...asciiString].map(char => char.charCodeAt(0)));
}

Answer 10

这对我有用：

Buffer.from(myArrayBuffer).toString("base64");

Answer 11

如果您可以添加库，base64-arraybuffer：

yarn add base64-arraybuffer

然后：

• encode(buffer)- 将ArrayBuffer编码为base64字符串
• decode(str)- 将base64字符串解码为ArrayBuffer