ArrayBuffer vers une chaîne encodée en base64

Question

J'ai besoin d'une méthode efficace (native) pour convertir un fichier ArrayBuffer à une chaîne de caractères base64 qui doit être utilisée dans un message multipartite.

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

mais les implémentations non natives sont plus rapides, par exemple https://gist.github.com/958841 voir http://jsperf.com/encoding-xhr-image-data/6

Points de repère mis à jour : https://jsben.ch/wnaZC

Answer 2

Cela me convient parfaitement :

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

Dans ES6, la syntaxe est un peu plus simple :

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

Comme indiqué dans les commentaires, cette méthode peut entraîner une erreur d'exécution dans certains navigateurs lorsque l'élément ArrayBuffer est important. La taille limite exacte dépend en tout état de cause de l'implémentation.

Answer 3

Pour ceux qui préfèrent les versions courtes, en voici une autre qui utilise Array.reduce ce qui n'entraînera pas de débordement de pile :

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

Answer 4

Il existe une autre méthode asynchrone qui consiste à utiliser Blob et FileReader.

Je n'ai pas testé les performances. Mais c'est une autre façon de penser.

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

var blob = new Blob([arrayBuffer])

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

reader.readAsDataURL(blob);