Мені потрібно перетворити рядок кодування base64 у ArrayBuffer. Рядки base64 вводяться користувачем, вони будуть скопійовані та вставлені з електронного листа, тому їх не буде, коли сторінка завантажується. Я хотів би зробити це в javascript, не здійснюючи виклику ajax на сервер, якщо це можливо.

Мені ці посилання були цікаві, але вони мені не допомогли:

ArrayBuffer для кодованого рядка base64

мова йде про протилежне перетворення, від ArrayBuffer до base64, а не навпаки

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

це виглядає добре, але я не можу зрозуміти, як використовувати код.

Чи існує простий (можливо, рідний) спосіб перетворення? Дякую

Спробуйте це:

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

Використання TypedArray.from :

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

Продуктивність для порівняння з цикловою версією відповіді Goran.it.

Відповідь Goran.it не працює через проблему юнікоду в javascript - https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding .

У підсумку я використав функцію, подану в блозі Даніеля Герреро: http://blog.danguer.com/2011/10/24/base64-binary-decoding-in-javascript/

Функція вказана за посиланням github: https://github.com/danguer/blog-examples/blob/master/js/base64-binary.js

Використовуйте ці рядки

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

Щойно знайшов base64-arraybuffer, невеликий пакет npm з неймовірно високим використанням, 5 млн завантажень минулого місяця (2017-08).

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

Для тих, хто шукає щось найкраще стандартне рішення, це може бути саме воно.

Асинхронне рішення, краще, коли дані великі:

// 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 - прекрасне середовище для розробки, тому воно здається дивним, ніж не забезпечує вирішення цієї невеликої проблеми. Рішення, пропоновані в інших місцях на цій сторінці, потенційно повільні. Ось моє рішення. Він використовує вбудовану функціональність, яка декодує URL-адреси зображень і звукових даних 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();

Запит на відправлення не вдається, якщо базовий рядок 65 погано сформований.

Тип MIME (додаток / октет), мабуть, непотрібний.

Перевірено в хромі. Має працювати в інших браузерах.

Для користувачів Node.js:

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

myBuffer буде типу Buffer, який є підкласом Uint8Array. На жаль, Uint8Array НЕ є ArrayBuffer, про що просив OP. Але, маніпулюючи ArrayBuffer, я майже завжди обгортаю його Uint8Array або чимось подібним, тому він повинен бути близьким до того, про що просять.

Pure JS - без рядка середнього кроку (без atob)

Я пишу наступну функцію, яка безпосередньо перетворює base64 (без перетворення в рядок на середньому кроці). ІДЕЯ

• отримати 4 шматки символів base64
• знайти індекс кожного символу в алфавіті base64
• перетворення індексу в 6-бітове число (двійковий рядок)
• об'єднати чотири 6-бітові числа, що дає 24-бітове число (зберігається як двійковий рядок)
• розділіть 24-бітовий рядок на три 8-бітові і приховайте кожен до числа і збережіть їх у вихідному масиві
• кутовий регістр: якщо вхідний рядок base64 закінчується одним / двома символами =, видаліть одне / два числа з вихідного масиву

Наведене нижче рішення дозволяє обробляти великі вхідні рядки base64. Подібна функція для перетворення байтів у base64 без btoa є ТУТ

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