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

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用於解壓縮歸檔從字符串

Answer 4

我提出這一建議是不要使用本地btoa策略，因爲它們不正確編碼所有ArrayBuffer的...

rewrite the DOMs atob() and btoa()

由於DOMStrings是16位編碼的字符串，在大多數瀏覽器上一個Unicode字符串調用window.btoa會引起CHARAC如果字符超出8位ASCII編碼字符的範圍，則超出範圍異常。

雖然我從來沒有遇到過這種確切的錯誤，我發現許多我試圖編碼的ArrayBuffer的已編碼不正確。

我會使用MDN建議或要點。

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

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

我用這個，併爲我工作。

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 7

可以通過使用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 8

對於那些誰喜歡總之，這裏是一個另一種使用Array.reduce這不會導致堆棧溢出：

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

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