Eu preciso converter uma string de codificação base64 em um ArrayBuffer. As strings de base64 são entradas do usuário, elas serão copiadas e coladas de um e-mail, portanto, não estarão lá quando a página for carregada. Eu gostaria de fazer isso em javascript sem fazer uma chamada ajax para o servidor, se possível.

Achei esses links interessantes, mas eles não me ajudaram:

ArrayBuffer para string codificada em base64

trata-se da conversão oposta, de ArrayBuffer para base64, não o contrário

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

parece bom, mas não consigo descobrir como usar o código.

Existe uma maneira fácil (talvez nativa) de fazer a conversão? obrigado

Experimente isto:

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

Usando TypedArray.from :

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

Desempenho a ser comparado com a versão for loop da resposta de Goran.it.

A resposta de Goran.it não funciona devido a um problema de unicode em javascript - https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding .

Acabei usando a função fornecida no blog de Daniel Guerrero: http://blog.danguer.com/2011/10/24/base64-binary-decoding-in-javascript/

A função está listada no link do github: https://github.com/danguer/blog-examples/blob/master/js/base64-binary.js

Use estas linhas

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

Acabei de encontrar base64-arraybuffer, um pequeno pacote npm com uso incrivelmente alto, 5 milhões de downloads no mês passado (2017-08).

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

Para quem procura a melhor solução padrão, pode ser esta.

Solução assíncrona , é melhor quando os dados são grandes:

// 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 é um bom ambiente de desenvolvimento, então parece estranho que ele não forneça uma solução para este pequeno problema. As soluções oferecidas em outras partes desta página são potencialmente lentas. Aqui está minha solução. Ele emprega a funcionalidade embutida que decodifica urls de dados de imagem e som em 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();

A solicitação de envio falha se a string de base 65 estiver mal formada.

O tipo MIME (aplicativo / octeto) é provavelmente desnecessário.

Testado em cromo. Deve funcionar em outros navegadores.

Para usuários Node.js:

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

myBuffer será do tipo Buffer, que é uma subclasse de Uint8Array. Infelizmente, Uint8Array NÃO é um ArrayBuffer como o OP estava pedindo. Mas ao manipular um ArrayBuffer, quase sempre envolvo-o com Uint8Array ou algo semelhante, então deve estar próximo do que está sendo solicitado.

JS puro - sem meio-passo de string (sem atob)

Escrevo a seguinte função que converte base64 de maneira direta (sem conversão para string no meio do caminho). IDÉIA

• obter um bloco de 4 caracteres de base64
• encontre o índice de cada caractere no alfabeto base64
• converter índice em número de 6 bits (string binária)
• junte quatro números de 6 bits que dá um número de 24 bits (armazenado como string binária)
• dividir string de 24 bits em três de 8 bits e converter cada uma para numerar e armazená-las na matriz de saída
• caso de canto: se a string de base64 de entrada terminar com um / dois =caracteres, remova um / dois números da matriz de saída

A solução abaixo permite processar grandes strings de entrada de base64. Função semelhante para converter bytes em base64 sem btoa está AQUI

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