如何将 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

jsPerf.com 现在是 jsPerf.app：https://jsperf.app/encoding-xhr-image-data/51

更新基准：https ://jsben.ch/wnaZC

Answer 2

这对我来说效果很好：

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

在 ES6 中，语法稍微简单一些：

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

正如注释中指出的，当 ArrayBuffer 很大时，此方法可能会导致某些浏览器中出现运行时错误。无论如何，确切的大小限制取决于实现。

Answer 3

对于那些喜欢简短的人，这里有另一个使用 Array.reduce 的方法，它不会导致堆栈溢出：

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

Answer 4

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 5

还有另一种异步方式使用 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 6

此示例使用内置 FileReader readDataURL() 转换为 Base64 编码。 数据 URL 是结构化的数据：[][;base64],，因此我们在逗号处拆分该 url，并仅返回 base64 编码的字符。

const blob = new Blob([array]);        
const reader = new FileReader();

reader.onload = (event) => {
  const dataUrl = event.target.result;
  const [_, base64] = dataUrl.split(','); 
  // do something with base64
};
   
reader.readAsDataURL(blob);

或者作为承诺的实用程序：

async function encode(array) {
  return new Promise((resolve) => {
    const blob = new Blob([array]);
    const reader = new FileReader();
    
    reader.onload = (event) => {
      const dataUrl = event.target.result;
      const [_, base64] = dataUrl.split(',');
      
      resolve(base64);
    };
    
    reader.readAsDataURL(blob);
  });
}

const encoded = await encode(typedArray);

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()

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

虽然我从未遇到过这个确切的错误，但我发现我尝试编码的许多 ArrayBuffer 编码不正确。

我要么使用 MDN 推荐，要么使用 gist。

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

Answer 9

下面是两个简单的函数，用于将 Uint8Array 转换为 Base64 字符串并再次转换回来

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

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

Answer 10

在 Node.js 中（即不是浏览器）：

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

Answer 11

如果您同意添加库，base64-arraybuffer：

yarn add base64-arraybuffer

那么：

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

Answer 12

ABtoB64(ab) {
    return new Promise(res => {
        const fr = new FileReader();
        fr.onload = ({target: {result: s}}) => res(s.slice(s.indexOf(';base64,') + 8));
        fr.readAsDataURL(new Blob([ab]));
    });
}

使用文件读取器的异步方法。

Answer 13

我使用 TextDecode api 将其转换为普通文本，然后将其转换为 Base64

const uint =  new Uint8Array([ 73, 32, 108, 111, 118, 101, 32, 121, 111, 117 ]).buffer
const decoder = new TextDecoder()
const decodedText = decoder.decode(uint)
const base64Code = btoa(decodedText)

Answer 14

在浏览器中，使用 btoa 建议的解决方案似乎不错。
但在 Node.js 中 btoa 已成为旧版

建议使用 buffer.toString(encoding) ，

如

const myString = buffer.toString("base64")

Answer 15

这是一个 ES6 解决方案，比使用原生 btoa 函数快 3 倍，比 mobz 和 Emmanuel 提出的非原生解决方案快 1.25 倍。它的代码还尊重最新的良好编码实践，并使用更干净的二进制掩码以提高可读性：

    /**
     * @param {ArrayBuffer} buffer
     * @return {string}
     */
    function toBase64(buffer) {
        const base64Chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";

        const byteLength = buffer.byteLength;
        const bufferView = new Uint8Array(buffer);
        const remainingBytesCount = byteLength % 3;
        const mainLength = byteLength - remainingBytesCount;

        let string = "";
        let i = 0;

        for (; i < mainLength; i += 3) {
            const chunk = (bufferView[i] << 16) | (bufferView[i + 1] << 8) | bufferView[i + 2];
            string += base64Chars[(chunk & 0b111111000000000000000000) >> 18];
            string += base64Chars[(chunk & 0b000000111111000000000000) >> 12];
            string += base64Chars[(chunk & 0b000000000000111111000000) >> 6];
            string += base64Chars[(chunk & 0b000000000000000000111111)];
        }

        if (remainingBytesCount === 2) {
            const chunk = (bufferView[i] << 16) | (bufferView[i + 1] << 8);
            string += base64Chars[(chunk & 0b111111000000000000000000) >> 18];
            string += base64Chars[(chunk & 0b000000111111000000000000) >> 12];
            string += base64Chars[(chunk & 0b000000000000111111000000) >> 6];
            string += "=";

        } else if (remainingBytesCount === 1) {
            const chunk = (bufferView[i] << 16);
            string += base64Chars[(chunk & 0b111111000000000000000000) >> 18];
            string += base64Chars[(chunk & 0b000000111111000000000000) >> 12];
            string += "==";
        }

        return string;
    }

Answer 16

您可以使用 Array.prototype.slice 从 ArrayBuffer 派生普通数组。
使用 Array.prototype.map 等函数将字节转换为字符，并将它们连接在一起形成字符串。

function arrayBufferToBase64(ab){

    var dView = new Uint8Array(ab);   //Get a byte view        

    var arr = Array.prototype.slice.call(dView); //Create a normal array        

    var arr1 = arr.map(function(item){        
      return String.fromCharCode(item);    //Convert
    });

    return window.btoa(arr1.join(''));   //Form a string

}

此方法速度更快，因为其中没有运行字符串连接。

Answer 17

 var uint8Array = new Uint8Array(BytesArray);

 var base64Str = btoa(String.fromCharCode(...uint8Array));

 Or,

 var base64Str = btoa(uint8Array.reduce((x, y) => x + String.fromCharCode(y), ''));

Answer 18

Uint8Array.prototype.toBase64 将很快实施浏览器！

然后您将能够编写：

const arr = new Uint8Array([ 73, 32, 108, 111, 118, 101, 32, 121, 111, 117 ]);
arr.toBase64(); // SSBsb3ZlIHlvdQ==

您还可以使用 这个 core-js 填充：

const arr = new Uint8Array([ 73, 32, 108, 111, 118, 101, 32, 121, 111, 117 ]);
const base64 = arr.toBase64();

console.log(base64);

<script src="https://unpkg.com/[email protected]/minified.js"></script>

Answer 19

使用 uint8-to-b64 包来做浏览器和 Node.js 中的编码/解码

Answer 20

在我这边，使用 Chrome 导航器，我必须使用 DataView() 来读取 arrayBuffer

function _arrayBufferToBase64( tabU8A ) {
var binary = '';
let lecteur_de_donnees = new DataView(tabU8A);
var len = lecteur_de_donnees.byteLength;
var chaine = '';
var pos1;
for (var i = 0; i < len; i++) {
    binary += String.fromCharCode( lecteur_de_donnees.getUint8( i ) );
}
chaine = window.btoa( binary )
return chaine;}

Answer 21

function _arrayBufferToBase64(uarr) {
    var strings = [], chunksize = 0xffff;
    var len = uarr.length;

    for (var i = 0; i * chunksize < len; i++){
        strings.push(String.fromCharCode.apply(null, uarr.subarray(i * chunksize, (i + 1) * chunksize)));
    }

    return strings.join("");
}

如果您使用 JSZip 从字符串中解压存档，这会更好