Ho bisogno di convertire una stringa di codifica base64 in un ArrayBuffer. Le stringhe base64 sono input dell'utente, verranno copiate e incollate da un'e-mail, quindi non sono presenti quando la pagina viene caricata. Vorrei farlo in javascript senza effettuare una chiamata ajax al server, se possibile.

Ho trovato quei link interessanti, ma non mi hanno aiutato:

ArrayBuffer alla stringa con codifica base64

si tratta della conversione opposta, da ArrayBuffer a base64, non il contrario

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

sembra buono ma non riesco a capire come usare il codice.

Esiste un modo semplice (forse nativo) per eseguire la conversione? Grazie

Prova questo:

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

Utilizzando TypedArray.from :

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

Prestazioni da confrontare con la versione for loop della risposta di Goran.it.

La risposta di Goran.it non funziona a causa di un problema unicode in javascript - https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding .

Ho finito per utilizzare la funzione data sul blog di Daniel Guerrero: http://blog.danguer.com/2011/10/24/base64-binary-decoding-in-javascript/

La funzione è elencata sul collegamento github: https://github.com/danguer/blog-examples/blob/master/js/base64-binary.js

Usa queste righe

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

Ho appena trovato base64-arraybuffer, un piccolo pacchetto npm con un utilizzo incredibilmente elevato, 5 milioni di download il mese scorso (2017-08).

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

Per chiunque cerchi qualcosa della migliore soluzione standard, potrebbe essere questo.

Soluzione asincrona , è meglio quando i dati sono grandi:

// 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 è un ottimo ambiente di sviluppo, quindi sembra strano che non fornisca una soluzione a questo piccolo problema. Le soluzioni offerte altrove in questa pagina sono potenzialmente lente. Ecco la mia soluzione. Utilizza la funzionalità incorporata che decodifica gli URL di dati di immagini e suoni in 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 richiesta di invio non riesce se la stringa di base 65 è formata male.

Il tipo MIME (application / octet) probabilmente non è necessario.

Testato in cromo. Dovrebbe funzionare in altri browser.

Per gli utenti di Node.js:

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

myBuffer sarà di tipo Buffer, che è una sottoclasse di Uint8Array. Sfortunatamente, Uint8Array NON è un ArrayBuffer come richiesto dall'OP. Ma quando manipolo un ArrayBuffer lo avvolgo quasi sempre con Uint8Array o qualcosa di simile, quindi dovrebbe essere vicino a ciò che viene richiesto.

Pure JS - no string middlestep (no atob)

Scrivo la seguente funzione che converte base64 in modo diretto (senza conversione in stringa al passo medio). IDEA

• ottenere un blocco di 4 caratteri base64
• trova l'indice di ogni carattere nell'alfabeto base64
• converte l'indice in un numero a 6 bit (stringa binaria)
• unire quattro numeri a 6 bit che danno un numero a 24 bit (memorizzato come stringa binaria)
• dividere la stringa a 24 bit in tre a 8 bit e convertire ciascuna in un numero e memorizzarle nell'array di output
• corner case: se la stringa base64 di input termina con uno / due =caratteri, rimuove uno / due numeri dall'array di output

La soluzione sottostante consente di elaborare stringhe base64 di input di grandi dimensioni. Una funzione simile per convertire i byte in base64 senza btoa è QUI

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