J'ai besoin de convertir une chaîne d'encodage base64 en un ArrayBuffer. Les chaînes base64 sont entrées par l'utilisateur, elles seront copiées et collées à partir d'un e-mail, donc elles ne sont pas là lorsque la page est chargée. Je voudrais faire cela en javascript sans faire un appel ajax au serveur si possible.

J'ai trouvé ces liens intéressants, mais ils ne m'ont pas aidé:

ArrayBuffer en chaîne encodée en base64

il s'agit de la conversion opposée, de ArrayBuffer à base64, et non l'inverse

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

cela semble bon mais je ne peux pas comprendre comment utiliser le code.

Existe-t-il un moyen simple (peut-être natif) de faire la conversion? Merci

Essaye ça:

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

Utilisation de TypedArray.from :

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

Performances à comparer avec la version en boucle for de la réponse Goran.it.

La réponse de Goran.it ne fonctionne pas en raison d'un problème Unicode en javascript - https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding .

J'ai fini par utiliser la fonction donnée sur le blog de Daniel Guerrero: http://blog.danguer.com/2011/10/24/base64-binary-decoding-in-javascript/

La fonction est répertoriée sur le lien github: https://github.com/danguer/blog-examples/blob/master/js/base64-binary.js

Utilisez ces lignes

var uintArray = Base64Binary.decode(base64_string);  
var byteArray = Base64Binary.decodeArrayBuffer(base64_string); 

Je viens de trouver base64-arraybuffer, un petit package npm avec une utilisation incroyablement élevée, 5 millions de téléchargements le mois dernier (2017-08).

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

Pour ceux qui recherchent quelque chose d'une meilleure solution standard, c'est peut-être cela.

Solution asynchrone , c'est mieux lorsque les données sont volumineuses:

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

Javascript est un bon environnement de développement, il semble donc étrange qu'il ne fournit pas de solution à ce petit problème. Les solutions proposées ailleurs sur cette page sont potentiellement lentes. Voici ma solution. Il utilise la fonctionnalité intégrée qui décode les URL de données d'image et de son en 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();

La demande d'envoi échoue si la chaîne de base 65 est mal formée.

Le type mime (application / octet) est probablement inutile.

Testé en chrome. Devrait fonctionner dans d'autres navigateurs.

Pour les utilisateurs de Node.js:

const myBuffer = Buffer.from(someBase64String, 'base64');

myBuffer sera de type Buffer qui est une sous-classe de Uint8Array. Malheureusement, Uint8Array n'est PAS un ArrayBuffer comme l'OP le demandait. Mais lors de la manipulation d'un ArrayBuffer, je l'enveloppe presque toujours avec Uint8Array ou quelque chose de similaire, donc il devrait être proche de ce qui est demandé.

Pure JS - pas de chaîne intermédiaire (pas d'atob)

J'écris la fonction suivante qui convertit la base64 de manière directe (sans conversion en chaîne au pas moyen). IDÉE

• obtenir un morceau de 4 caractères base64
• trouver l'index de chaque caractère dans l'alphabet base64
• convertir l'index en nombre 6 bits (chaîne binaire)
• joindre quatre nombres de 6 bits qui donnent un nombre de 24 bits (stocké sous forme de chaîne binaire)
• diviser la chaîne de 24 bits en trois chaînes de 8 bits et convertir chacune en un nombre et les stocker dans le tableau de sortie
• cas d'angle: si la chaîne d'entrée base64 se termine par un / deux caractères =, supprimez un / deux nombres du tableau de sortie

La solution ci-dessous permet de traiter de grandes chaînes d'entrée base64. Une fonction similaire pour convertir des octets en base64 sans btoa est ICI

function base64ToBytesArr(str) {
  const abc = [..."ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"]; // base64 alphabet
  let result = [];

  for(let i=0; i<str.length/4; i++) {
    let chunk = [...str.slice(4*i,4*i+4)]
    let bin = chunk.map(x=> abc.indexOf(x).toString(2).padStart(6,0)).join(''); 
    let bytes = bin.match(/.{1,8}/g).map(x=> +('0b'+x));
    result.push(...bytes.slice(0,3 - (str[4*i+2]=="=") - (str[4*i+3]=="=")));
  }
  return result;
}


// --------
// TEST
// --------


let test = "Alice's Adventure in Wonderland.";  

console.log('test string:', test.length, test);
let b64_btoa = btoa(test);
console.log('encoded string:', b64_btoa);

let decodedBytes = base64ToBytesArr(b64_btoa); // decode base64 to array of bytes
console.log('decoded bytes:', JSON.stringify(decodedBytes));
let decodedTest = decodedBytes.map(b => String.fromCharCode(b) ).join``;
console.log('Uint8Array', JSON.stringify(new Uint8Array(decodedBytes)));
console.log('decoded string:', decodedTest.length, decodedTest);

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