Necesito convertir una cadena de codificación base64 en un ArrayBuffer. Las cadenas base64 son entradas del usuario, se copiarán y pegarán desde un correo electrónico, por lo que no estarán allí cuando se cargue la página. Me gustaría hacer esto en javascript sin hacer una llamada ajax al servidor si es posible.

Encontré esos enlaces interesantes, pero no me ayudaron:

ArrayBuffer a cadena codificada en base64

se trata de la conversión opuesta, de ArrayBuffer a base64, no al revés

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

esto se ve bien pero no puedo entender cómo usar el código.

¿Existe una forma fácil (tal vez nativa) de realizar la conversión? Gracias

Prueba esto:

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. De :

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

El rendimiento se comparará con la versión de bucle for de la respuesta de Goran.it.

La respuesta de Goran.it no funciona debido a un problema de Unicode en javascript: https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding .

Terminé usando la función dada en el blog de Daniel Guerrero: http://blog.danguer.com/2011/10/24/base64-binary-decoding-in-javascript/

La función se enumera en el enlace de github: https://github.com/danguer/blog-examples/blob/master/js/base64-binary.js

Use estas líneas

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

Acabo de encontrar base64-arraybuffer, un pequeño paquete npm con un uso increíblemente alto, 5 millones de descargas el mes pasado (2017-08).

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

Para cualquiera que busque la mejor solución estándar, esta puede ser la solución.

Solución asincrónica , es mejor cuando los datos son 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 es un buen entorno de desarrollo, por lo que parece extraño que no proporcione una solución a este pequeño problema. Las soluciones que se ofrecen en otras partes de esta página son potencialmente lentas. Aquí está mi solución. Emplea la funcionalidad incorporada que decodifica las URL de datos de imagen y sonido 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 solicitud de envío falla si la cadena base 65 está mal formada.

El tipo mime (aplicación / octeto) probablemente sea innecesario.

Probado en cromo. Debería funcionar en otros navegadores.

Para los usuarios de Node.js:

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

myBuffer será de tipo Buffer, que es una subclase de Uint8Array. Desafortunadamente, Uint8Array NO es un ArrayBuffer como pedía el OP. Pero cuando manipulo un ArrayBuffer, casi siempre lo envuelvo con Uint8Array o algo similar, por lo que debería estar cerca de lo que se solicita.

Pure JS - sin cadena middlestep (sin atob)

Escribo la siguiente función que convierte base64 de manera directa (sin conversión a cadena en el paso medio). IDEA

• obtener un fragmento de 4 caracteres base64
• buscar el índice de cada carácter en el alfabeto base64
• convertir el índice en un número de 6 bits (cadena binaria)
• une cuatro números de 6 bits que dan un número de 24 bits (almacenado como cadena binaria)
• dividir la cadena de 24 bits en tres de 8 bits y convertir cada uno en un número y almacenarlos en la matriz de salida
• caso de esquina: si la cadena de entrada base64 termina con uno / dos caracteres =, elimine uno / dos números de la matriz de salida

La siguiente solución permite procesar grandes cadenas de entrada base64. Una función similar para convertir bytes a base64 sin btoa está AQUÍ

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