blocks|key|325051|text|使用TypedArray.from|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|325052|Uint8Array.from(atob(base64_string),+c+=>+c.charCodeAt(0))|code-block|syntax|javascript|325053|性能要与Goran.it应答的for循环版本进行比较。|325054|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/from^0|2|F|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

Using <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/from" rel="noreferrer">TypedArray.from</a>:

<pre class="lang-js prettyprint-override"><code>Uint8Array.from(atob(base64_string), c =&gt; c.charCodeAt(0))
</code></pre>

Performance to be compared with the for loop version of Goran.it answer.

blocks|key|325029|text|由于javascript+-+解码中的unicode问题，它的答案不起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|325030|最后，我使用了Daniel博客上的函数：http://blog.danguer.com/2011/10/24/base64-binary-decoding-in-javascript/|325031|函数列在github链接上：https://github.com/danguer/blog-examples/blob/master/js/base64-binary.js|325032|使用这些行|325033|var+uintArray+=+Base64Binary.decode(base64_string);++
var+byteArray+=+Base64Binary.decodeArrayBuffer(base64_string);+|code-block|syntax|javascript|325034|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding|1|http://blog.danguer.com/2011/10/24/base64-binary-decoding-in-javascript/|2|https://github.com/danguer/blog-examples/blob/master/js/base64-binary.js^0|F|2|0|0|K|20|1|0|E|20|2|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@$A|15|B|16|1|17]]|C|$]]|$1|F|3|G|5|6|7|18|8|@]|9|@$A|19|B|1A|1|1B]]|C|$]]|$1|H|3|I|5|6|7|1C|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|1D|8|@]|9|@]|C|$M|N]]|$1|O|3|-4|5|6|7|1E|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]|W|$5|R|S|T|C|$U|X]]|Y|$5|R|S|T|C|$U|Z]]]]

Goran.it's answer does not work because of unicode problem in javascript - <a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding</a>. 
I ended up using the function given on Daniel Guerrero's blog: <a href="http://blog.danguer.com/2011/10/24/base64-binary-decoding-in-javascript/" rel="noreferrer">http://blog.danguer.com/2011/10/24/base64-binary-decoding-in-javascript/</a>

Function is listed on github link: <a href="https://github.com/danguer/blog-examples/blob/master/js/base64-binary.js" rel="noreferrer">https://github.com/danguer/blog-examples/blob/master/js/base64-binary.js</a>
 
Use these lines 

<pre><code>var uintArray = Base64Binary.decode(base64_string); 
var byteArray = Base64Binary.decodeArrayBuffer(base64_string); 
</code></pre>

blocks|key|325170|text|对于Node.js用户：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|325171|const+myBuffer+=+Buffer.from(someBase64String,+'base64');|code-block|syntax|javascript|325172|myBuffer将是缓冲区类型，它是Uint8Array的子类。不幸的是，Uint8Array不是OP所要求的ArrayBuffer。但在操作ArrayBuffer时，我几乎总是用Uint8Array或类似的东西包装它，因此它应该接近所要求的内容。|325173|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

For Node.js users:

<pre><code>const myBuffer = Buffer.from(someBase64String, 'base64');
</code></pre>

myBuffer will be of type Buffer which is a subclass of Uint8Array. Unfortunately, Uint8Array is NOT an ArrayBuffer as the OP was asking for. But when manipulating an ArrayBuffer I almost always wrap it with Uint8Array or something similar, so it should be close to what's being asked for.

blocks|key|325089|text|刚刚找到last+64-arraybuffer，一个小型npm软件包，使用率极高，上个月下载量达到500万次(2017-08)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|325090|https://www.npmjs.com/package/base64-arraybuffer|offset|length|325091|对于任何寻找最好的标准解决方案的人来说，这可能就是它。|325092|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1C|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

Just found base64-arraybuffer, a small npm package with incredibly high usage, 5M downloads last month (2017-08).

<a href="https://www.npmjs.com/package/base64-arraybuffer" rel="noreferrer">https://www.npmjs.com/package/base64-arraybuffer</a>

For anyone looking for something of a best standard solution, this may be it.

blocks|key|1048498|text|异步解决方案，当数据很大时更好：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1048499|//+base64+to+buffer
function+base64ToBufferAsync(base64)+{
++var+dataUrl+=+"data:application/octet-binary;base64,"+%2B+base64;

++fetch(dataUrl)
++++.then(res+=>+res.arrayBuffer())
++++.then(buffer+=>+{
++++++console.log("base64+to+buffer:+"+%2B+new+Uint8Array(buffer));
++++})
}

//+buffer+to+base64
function+bufferToBase64Async(+buffer+)+{
++++var+blob+=+new+Blob([buffer],+{type:'application/octet-binary'});++++
++++console.log("buffer+to+blob:"+%2B+blob)

++++var+fileReader+=+new+FileReader();
++++fileReader.onload+=+function()+{
++++++var+dataUrl+=+fileReader.result;
++++++console.log("blob+to+dataUrl:+"+%2B+dataUrl);

++++++var+base64+=+dataUrl.substr(dataUrl.indexOf(',')%2B1)++++++
++++++console.log("dataUrl+to+base64:+"+%2B+base64);
++++};
++++fileReader.readAsDataURL(blob);
}|code-block|syntax|javascript|1048500|entityMap^0|0|2|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Async solution, it's better when the data is big:

<pre><code>// base64 to buffer
function base64ToBufferAsync(base64) {
 var dataUrl = "data:application/octet-binary;base64," + base64;

 fetch(dataUrl)
 .then(res =&gt; res.arrayBuffer())
 .then(buffer =&gt; {
 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);
}
</code></pre>

blocks|key|325125|text|Javascript是一个很好的开发环境，所以它看起来比它没有提供一个解决这个小问题的解决方案更奇怪。本页其他地方提供的解决方案可能很慢。这是我的解决办法。它使用内置的功能来解码base64图像和声音数据urls。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|325126|var+req+=+new+XMLHttpRequest;
req.open('GET',+"data:application/octet;base64,"+%2B+base64Data);
req.responseType+=+'arraybuffer';
req.onload+=+function+fileLoaded(e)
{
+++var+byteArray+=+new+Uint8Array(e.target.response);
+++//+var+shortArray+=+new+Int16Array(e.target.response);
+++//+var+unsignedShortArray+=+new+Int16Array(e.target.response);
+++//+etc.
}
req.send();|code-block|syntax|javascript|325127|如果基本64字符串格式错误，则发送请求失败。|325128|mime类型(应用程序/八进制)可能是不必要的。|325129|用铬做测试。应该在其他浏览器中工作。|325130|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Javascript is a fine development environment so it seems odd than it doesn't provide a solution to this small problem. The solutions offered elsewhere on this page are potentially slow. Here is my solution. It employs the inbuilt functionality that decodes base64 image and sound data urls.
<pre><code>var req = new XMLHttpRequest;
req.open('GET', &quot;data:application/octet;base64,&quot; + base64Data);
req.responseType = 'arraybuffer';
req.onload = function fileLoaded(e)
{
 var byteArray = new Uint8Array(e.target.response);
 // var shortArray = new Int16Array(e.target.response);
 // var unsignedShortArray = new Int16Array(e.target.response);
 // etc.
}
req.send();
</code></pre>
The send request fails if the base 64 string is badly formed.
The mime type (application/octet) is probably unnecessary.
Tested in chrome. Should work in other browsers.

blocks|key|1326791|text|纯JS+-没有字符串的中间步骤(没有图b)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1326792|我编写了以下函数，它以直接的方式转换base64+(而不是在中间步骤转换为字符串)。想法|1326793|获取4个base64字符块|unordered-list-item|1326794|查找base64字母表中每个字符的索引|1326795|将索引转换为6位数字(二进制字符串)|1326796|连接四个6位数字，它提供24位数字(存储为二进制字符串)。|1326797|将24位字符串拆分为3个8位，并将每个字符串隐藏为数字，并将它们存储在输出数组中。|1326798|角大小写:如果输入base64字符串以一个/两个=字符结尾，则从输出数组中删除一个/两个数字|offset|length|style|CODE|1326799|下面的解决方案允许处理大型输入base64字符串。在没有btoa的情况下将字节转换为base64的类似函数是这里。|1326800|​|1326801|function+base64ToBytesArr(str)+{
++const+abc+=+[..."ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789%2B/"];+//+base64+alphabet
++let+result+=+[];

++for(let+i=0;+i<str.length/4;+i%2B%2B)+{
++++let+chunk+=+[...str.slice(4*i,4*i%2B4)]
++++let+bin+=+chunk.map(x=>+abc.indexOf(x).toString(2).padStart(6,0)).join('');+
++++let+bytes+=+bin.match(/.{1,8}/g).map(x=>+%2B('0b'%2Bx));
++++result.push(...bytes.slice(0,3+-+(str[4*i%2B2]=="=")+-+(str[4*i%2B3]=="=")));
++}
++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);|code-block|syntax|javascript|1326802|1326803|注意！|1326804|如果您想将base64解码为STRING+(而不是字节数组)，并且知道结果包含utf8字符，那么atob一般会失败，例如，对于字符，atob("8J%2BSqQ==")会给出错误的结果。在这种情况下，您可以使用上面的解决方案，并在适当方式中将结果字节数组转换为字符串，例如：|1326805|1326806|function+base64ToBytesArr(str)+{
++const+abc+=+[..."ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789%2B/"];+//+base64+alphabet
++let+result+=+[];

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


//+--------
//+TEST
//+--------


let+testB64+=+"8J%2BSqQ==";+++//+for+string:+"";++
console.log('input+base64++++++++++++:',+testB64);

let+decodedBytes+=+base64ToBytesArr(testB64);+//+decode+base64+to+array+of+bytes
console.log('decoded+bytes+++++++++++:',+JSON.stringify(decodedBytes));

let+result+=+new+TextDecoder("utf-8").decode(new+Uint8Array(decodedBytes));
console.log('properly+decoded+string+:',+result);

let+result_atob+=+atob(testB64);
console.log('decoded+by+atob+++++++++:',+result_atob);|1326807|1326808|测试代码片段：+103.0.5060.134+(arm64)、safari+15.2、firefox+103.0.1+(64位)、edge+103.0.1264.77+(arm64)和节点-jsE+231+v12.16.1|BOLD|1326809|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/62362724/860099|1|https://gist.github.com/enepomnyaschih/72c423f727d395eeaa09697058238727?permalink_comment_id=2975079#gistcomment-2975079|2|https://stackoverflow.com/a/46241050/860099^0|0|0|0|0|0|0|0|O|1|0|1I|2|0|0|0|0|0|0|1C|4|1U|G|1J|2|1|35|4|2|0|0|0|0|V|6|17|7|1T|4|2K|J|2P|E|0^^$0|@$1|2|3|4|5|6|7|1R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1S|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1T|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|1U|8|@]|9|@]|A|$]]|$1|I|3|J|5|F|7|1V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1W|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|1X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|1Y|8|@$Q|1Z|R|20|S|T]]|9|@]|A|$]]|$1|U|3|V|5|6|7|21|8|@]|9|@$Q|22|R|23|1|24]]|A|$]]|$1|W|3|X|5|6|7|25|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|10|7|26|8|@]|9|@]|A|$11|12]]|$1|13|3|X|5|6|7|27|8|@]|9|@]|A|$]]|$1|14|3|15|5|6|7|28|8|@]|9|@]|A|$]]|$1|16|3|17|5|6|7|29|8|@$Q|2A|R|2B|S|T]|$Q|2C|R|2D|S|T]]|9|@$Q|2E|R|2F|1|2G]|$Q|2H|R|2I|1|2J]]|A|$]]|$1|18|3|X|5|6|7|2K|8|@]|9|@]|A|$]]|$1|19|3|1A|5|10|7|2L|8|@]|9|@]|A|$11|12]]|$1|1B|3|X|5|6|7|2M|8|@]|9|@]|A|$]]|$1|1C|3|1D|5|6|7|2N|8|@$Q|2O|R|2P|S|1E]|$Q|2Q|R|2R|S|1E]|$Q|2S|R|2T|S|1E]|$Q|2U|R|2V|S|1E]|$Q|2W|R|2X|S|T]]|9|@]|A|$]]|$1|1F|3|-4|5|6|7|2Y|8|@]|9|@]|A|$]]]|1G|$1H|$5|1I|1J|1K|A|$1L|1M]]|1N|$5|1I|1J|1K|A|$1L|1O]]|1P|$5|1I|1J|1K|A|$1L|1Q]]]]

<h1>Pure JS - no string middlestep (no atob)</h1>
I write following function which convert base64 in direct way (without conversion to string at the middlestep). IDEA
<ul>
<li>get 4 base64 characters chunk</li>
<li>find index of each character in base64 alphabet</li>
<li>convert index to 6-bit number (binary string)</li>
<li>join four 6 bit numbers which gives 24-bit numer (stored as binary string)</li>
<li>split 24-bit string to three 8-bit and covert each to number and store them in output array</li>
<li>corner case: if input base64 string ends with one/two <code>=</code> char, remove one/two numbers from output array</li>
</ul>
Below solution allows to process large input base64 strings. Similar function for convert bytes to base64 without btoa is <a href="https://stackoverflow.com/a/62362724/860099">HERE</a>
<div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function base64ToBytesArr(str) {
 const abc = [..."ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"]; // base64 alphabet
 let result = [];

 for(let i=0; i&lt;str.length/4; i++) {
 let chunk = [...str.slice(4*i,4*i+4)]
 let bin = chunk.map(x=&gt; abc.indexOf(x).toString(2).padStart(6,0)).join(''); 
 let bytes = bin.match(/.{1,8}/g).map(x=&gt; +('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 =&gt; String.fromCharCode(b) ).join``;
console.log('Uint8Array', JSON.stringify(new Uint8Array(decodedBytes)));
console.log('decoded string:', decodedTest.length, decodedTest);</code></pre>
</div>
</div>

<h2>Caution!</h2>
If you want to decode base64 to STRING (not bytes array) and you know that result contains utf8 characters then <code>atob</code> will <a href="https://gist.github.com/enepomnyaschih/72c423f727d395eeaa09697058238727?permalink_comment_id=2975079#gistcomment-2975079" rel="nofollow noreferrer">fail</a> in general e.g. for character the <code>atob(&quot;8J+SqQ==&quot;)</code> will give wrong result . In this case you can use above solution and convert result bytes array to string in <a href="https://stackoverflow.com/a/46241050/860099">proper way</a> e.g. :
<div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function base64ToBytesArr(str) {
 const abc = [..."ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"]; // base64 alphabet
 let result = [];

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


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


let testB64 = "8J+SqQ=="; // for string: ""; 
console.log('input base64 :', testB64);

let decodedBytes = base64ToBytesArr(testB64); // decode base64 to array of bytes
console.log('decoded bytes :', JSON.stringify(decodedBytes));

let result = new TextDecoder("utf-8").decode(new Uint8Array(decodedBytes));
console.log('properly decoded string :', result);

let result_atob = atob(testB64);
console.log('decoded by atob :', result_atob);</code></pre>
</div>
</div>

Snippets tested 2022-08-04 on: chrome 103.0.5060.134 (arm64), safari 15.2, firefox 103.0.1 (64 bit), edge 103.0.1264.77 (arm64), and node-js v12.16.1

blocks|key|1326849|text|我强烈建议使用npm包正确实现base64规范。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1326850|我认识的最好的人是rfc4648|offset|length|1326851|问题是btoa和atob使用二进制字符串而不是Uint8Array，并且尝试转换到和从它转换是很麻烦的。此外，在npm中也有大量的坏包()。在找到那个之前我浪费了很多时间。|1326852|这个特定包的创建者做了一件简单的事情:他们接受了Base64的规范(顺便说一句，它是这里+)，并从一开始到最后正确地实现了它。(包括规范中也有用的其他格式，如Base64+64-url、Base32等)这看起来并不多，但显然这对其他库来说要求太多了。|1326853|所以是的，我知道我在做一些改变，但如果你想避免浪费你的时间，就使用rfc4648吧。|1326854|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/rfc4648|1|https://www.rfc-editor.org/rfc/rfc4648^0|0|9|7|0|0|0|16|2|1|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|F|3|G|5|6|7|10|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|11|8|@]|9|@$D|12|E|13|1|14]]|A|$]]|$1|J|3|K|5|6|7|15|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]|T|$5|O|P|Q|A|$R|U]]]]

I would strongly suggest using an npm package implementing correctly the base64 specification.
The best one I know is <a href="https://www.npmjs.com/package/rfc4648" rel="nofollow noreferrer">rfc4648</a>
The problem is that btoa and atob use binary strings instead of Uint8Array and trying to convert to and from it is cumbersome. Also there is a lot of bad packages in npm for that. I lose a lot of time before finding that one.
The creators of that specific package did a simple thing: they took the specification of Base64 (which is <a href="https://www.rfc-editor.org/rfc/rfc4648" rel="nofollow noreferrer">here</a> by the way) and implemented it correctly from the beginning to the end. (Including other formats in the specification that are also useful like Base64-url, Base32, etc ...) That doesn't seem a lot but apparently that was too much to ask to the bunch of other libraries.
So yeah, I know I'm doing a bit of proselytism but if you want to avoid losing your time too just use rfc4648.

blocks|key|325354|text|我使用这个问题的公认答案来在通过ASCII传输的base64Url数据领域中创建base64Url字符串<->+arrayBuffer转换[atob，btoa是base64with+%2B/<->js二进制字符串]，所以我决定发布代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|325355|我们中的许多人可能同时希望转换和客户机-服务器通信可以使用base64Url版本(虽然cookie可能包含%2B/以及-_字符，如果我完全理解，只有"，\字符和128个ASCII中的一些邪恶字符是不允许的)。但是url不能包含/字符，因此更广泛地使用b64+url版本，这当然不是atob-btoa支持的.|325356|看到其他评论，我想强调我这里的用例是通过url/cookie传输base64Url数据，并试图使用js+(2017)来使用这些加密数据，因此需要ArrayBuffer表示和b64u+<->+arrBuff转换.如果数组缓冲区表示的不是base64+(ascii的一部分)，则此转换自atob以来就无法工作，btoa仅限于ascii(128)。请查看适当的转换器，如下所示：|325357|buff+->+b64u版本来自Mathias的一条推文，谢谢您的支持！他还写了一个base64编解码器：https://github.com/mathiasbynens/base64|offset|length|325358|来自java，在试图理解java+byte[]实际上是js+Int8Array+(签名int)的代码时，它可能会有所帮助，但我们在这里使用的是未签名版本Uint8Array，因为js转换与它们一起工作。它们都是256位，所以我们现在叫它js+byte[]+.|325359|代码来自模块类，这就是为什么是静态的。|325360|//utility

/**
+*+Array+buffer+to+base64Url+string
+*+-+arrBuff->byte[]->biStr->b64->b64u
+*+@param+arrayBuffer
+*+@returns+{string}
+*+@private
+*/
static+_arrayBufferToBase64Url(arrayBuffer)+{
++++console.log('base64Url+from+array+buffer:',+arrayBuffer);

++++let+base64Url+=+window.btoa(String.fromCodePoint(...new+Uint8Array(arrayBuffer)));
++++base64Url+=+base64Url.replaceAll('%2B',+'-');
++++base64Url+=+base64Url.replaceAll('/',+'_');

++++console.log('base64Url:',+base64Url);
++++return+base64Url;
}

/**
+*+Base64Url+string+to+array+buffer
+*+-+b64u->b64->biStr->byte[]->arrBuff
+*+@param+base64Url
+*+@returns+{ArrayBufferLike}
+*+@private
+*/
static+_base64UrlToArrayBuffer(base64Url)+{
++++console.log('array+buffer+from+base64Url:',+base64Url);

++++let+base64+=+base64Url.replaceAll('-',+'%2B');
++++base64+=+base64.replaceAll('_',+'/');
++++const+binaryString+=+window.atob(base64);
++++const+length+=+binaryString.length;
++++const+bytes+=+new+Uint8Array(length);
++++for+(let+i+=+0;+i+<+length;+i%2B%2B)+{
++++++++bytes[i]+=+binaryString.charCodeAt(i);
++++}

++++console.log('array+buffer:',+bytes.buffer);
++++return+bytes.buffer;
}|code-block|syntax|javascript|325361|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/mathiasbynens/base64^0|0|0|0|1H|13|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|13|8|@]|9|@$H|14|I|15|1|16]]|A|$]]|$1|J|3|K|5|6|7|17|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|18|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|19|8|@]|9|@]|A|$Q|R]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

I used the accepted answer to this question to create base64Url string &lt;-&gt; arrayBuffer conversions in the realm of base64Url data transmitted via ASCII-cookie [atob, btoa are base64[with +/]&lt;-&gt;js binary string], so I decided to post the code.
Many of us may want both conversions and client-server communication may use the base64Url version (though a cookie may contain +/ as well as -_ characters if I understand well, only &quot;,;\ characters and some wicked characters from the 128 ASCII are disallowed). But a url cannot contain / character, hence the wider use of b64 url version which of course not what atob-btoa supports...
Seeing other comments, I would like to stress that my use case here is base64Url data transmission via url/cookie and trying to use this crypto data with the js crypto api (2017) hence the need for ArrayBuffer representation and b64u &lt;-&gt; arrBuff conversions... if array buffers represent other than base64 (part of ascii) this conversion wont work since atob, btoa is limited to ascii(128). Check out an appropriate converter like below:
The buff -&gt; b64u version is from a tweet from Mathias Bynens, thanks for that one (too)! He also wrote a base64 encoder/decoder:
<a href="https://github.com/mathiasbynens/base64" rel="nofollow noreferrer">https://github.com/mathiasbynens/base64</a>
Coming from java, it may help when trying to understand the code that java byte[] is practically js Int8Array (signed int) but we use here the unsigned version Uint8Array since js conversions work with them. They are both 256bit, so we call it byte[] in js now...
The code is from a module class, that is why static.
<pre><code>//utility

/**
 * Array buffer to base64Url string
 * - arrBuff-&gt;byte[]-&gt;biStr-&gt;b64-&gt;b64u
 * @param arrayBuffer
 * @returns {string}
 * @private
 */
static _arrayBufferToBase64Url(arrayBuffer) {
 console.log('base64Url from array buffer:', arrayBuffer);

 let base64Url = window.btoa(String.fromCodePoint(...new Uint8Array(arrayBuffer)));
 base64Url = base64Url.replaceAll('+', '-');
 base64Url = base64Url.replaceAll('/', '_');

 console.log('base64Url:', base64Url);
 return base64Url;
}

/**
 * Base64Url string to array buffer
 * - b64u-&gt;b64-&gt;biStr-&gt;byte[]-&gt;arrBuff
 * @param base64Url
 * @returns {ArrayBufferLike}
 * @private
 */
static _base64UrlToArrayBuffer(base64Url) {
 console.log('array buffer from base64Url:', base64Url);

 let base64 = base64Url.replaceAll('-', '+');
 base64 = base64.replaceAll('_', '/');
 const binaryString = window.atob(base64);
 const length = binaryString.length;
 const bytes = new Uint8Array(length);
 for (let i = 0; i &lt; length; i++) {
 bytes[i] = binaryString.charCodeAt(i);
 }

 console.log('array buffer:', bytes.buffer);
 return bytes.buffer;
}
</code></pre>

blocks|key|1048708|text|从一个ArrayBuffer生成了一个base64：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1048709|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%2B%2B)+{
++++++++++++bytes[i]+=+binary_string.charCodeAt(i);
++++++++}
++++++++return+bytes.buffer;
++++}|code-block|syntax|javascript|1048710|我试着使用上面的代码，它很好用。|1048711|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

made a ArrayBuffer from a base64:
<pre><code>function base64ToArrayBuffer(base64) {
 var binary_string = window.atob(base64);
 var len = binary_string.length;
 var bytes = new Uint8Array(len);
 for (var i = 0; i &lt; len; i++) {
 bytes[i] = binary_string.charCodeAt(i);
 }
 return bytes.buffer;
 }
</code></pre>
I was trying to use above code and It's working fine.

blocks|key|1327002|text|无atob的解决方案|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1327003|我见过很多人抱怨在回复中使用atob和btoa。在使用它们时，需要考虑到一些问题。|1327004|在有关Base64的MDN页面中，有一种解决方案没有使用它们。下面可以找到将base64字符串转换为从文档复制的Uint8Array的代码。|1327005|注意，下面的函数返回一个Uint8Array。要获得ArrayBuffer版本，只需执行uintArray.buffer即可。|1327006|function+b64ToUint6(nChr)+{
++return+nChr+>+64+&&+nChr+<+91
++++?+nChr+-+65
++++:+nChr+>+96+&&+nChr+<+123
++++?+nChr+-+71
++++:+nChr+>+47+&&+nChr+<+58
++++?+nChr+%2B+4
++++:+nChr+===+43
++++?+62
++++:+nChr+===+47
++++?+63
++++:+0;
}

function+base64DecToArr(sBase64,+nBlocksSize)+{
++const+sB64Enc+=+sBase64.replace(/[%5EA-Za-z0-9%2B/]/g,+"");
++const+nInLen+=+sB64Enc.length;
++const+nOutLen+=+nBlocksSize
++++?+Math.ceil(((nInLen+*+3+%2B+1)+>>+2)+/+nBlocksSize)+*+nBlocksSize
++++:+(nInLen+*+3+%2B+1)+>>+2;
++const+taBytes+=+new+Uint8Array(nOutLen);

++let+nMod3;
++let+nMod4;
++let+nUint24+=+0;
++let+nOutIdx+=+0;
++for+(let+nInIdx+=+0;+nInIdx+<+nInLen;+nInIdx%2B%2B)+{
++++nMod4+=+nInIdx+&+3;
++++nUint24+%7C=+b64ToUint6(sB64Enc.charCodeAt(nInIdx))+<<+(6+*+(3+-+nMod4));
++++if+(nMod4+===+3+%7C%7C+nInLen+-+nInIdx+===+1)+{
++++++nMod3+=+0;
++++++while+(nMod3+<+3+&&+nOutIdx+<+nOutLen)+{
++++++++taBytes[nOutIdx]+=+(nUint24+>>>+((16+>>>+nMod3)+&+24))+&+255;
++++++++nMod3%2B%2B;
++++++++nOutIdx%2B%2B;
++++++}
++++++nUint24+=+0;
++++}
++}

++return+taBytes;
}|code-block|syntax|javascript|1327007|如果您对反向操作(+ArrayBuffer+to+base64+)感兴趣，您可以在相同的链接中找到如何做到这一点。|1327008|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Glossary/Base64#the_unicode_problem|1|https://developer.mozilla.org/en-US/docs/Glossary/Base64#solution_2_%25E2%2580%2593_rewriting_atob_and_btoa_using_typedarrays_and_utf-8^0|1|4|0|E|4|J|4|10|4|0|0|3|6|1|0|18|G|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@$9|1A|A|1B|1|1C]]|E|$]]|$1|H|3|I|5|6|7|1D|8|@]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|J|3|K|5|6|7|1H|8|@$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|L|3|M|5|N|7|1K|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|6|7|1L|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1M|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]|10|$5|V|W|X|E|$Y|11]]]]

<h1>Solution without <code>atob</code></h1>
I've seen many people complaining about using <code>atob</code> and <code>btoa</code> in the replies. There are <a href="https://developer.mozilla.org/en-US/docs/Glossary/Base64#the_unicode_problem" rel="nofollow noreferrer">some issues</a> to take into account when using them.
There's a solution without using them in the MDN page about <a href="https://developer.mozilla.org/en-US/docs/Glossary/Base64#solution_2_%E2%80%93_rewriting_atob_and_btoa_using_typedarrays_and_utf-8" rel="nofollow noreferrer">Base64</a>. Below you can find the code to convert a base64 string into a Uint8Array copied from the docs.
Note that the function below returns a Uint8Array. To get the ArrayBuffer version you just need to do <code>uintArray.buffer</code>.
<pre class="lang-js prettyprint-override"><code>function b64ToUint6(nChr) {
 return nChr &gt; 64 &amp;&amp; nChr &lt; 91
 ? nChr - 65
 : nChr &gt; 96 &amp;&amp; nChr &lt; 123
 ? nChr - 71
 : nChr &gt; 47 &amp;&amp; nChr &lt; 58
 ? nChr + 4
 : nChr === 43
 ? 62
 : nChr === 47
 ? 63
 : 0;
}

function base64DecToArr(sBase64, nBlocksSize) {
 const sB64Enc = sBase64.replace(/[^A-Za-z0-9+/]/g, &quot;&quot;);
 const nInLen = sB64Enc.length;
 const nOutLen = nBlocksSize
 ? Math.ceil(((nInLen * 3 + 1) &gt;&gt; 2) / nBlocksSize) * nBlocksSize
 : (nInLen * 3 + 1) &gt;&gt; 2;
 const taBytes = new Uint8Array(nOutLen);

 let nMod3;
 let nMod4;
 let nUint24 = 0;
 let nOutIdx = 0;
 for (let nInIdx = 0; nInIdx &lt; nInLen; nInIdx++) {
 nMod4 = nInIdx &amp; 3;
 nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) &lt;&lt; (6 * (3 - nMod4));
 if (nMod4 === 3 || nInLen - nInIdx === 1) {
 nMod3 = 0;
 while (nMod3 &lt; 3 &amp;&amp; nOutIdx &lt; nOutLen) {
 taBytes[nOutIdx] = (nUint24 &gt;&gt;&gt; ((16 &gt;&gt;&gt; nMod3) &amp; 24)) &amp; 255;
 nMod3++;
 nOutIdx++;
 }
 nUint24 = 0;
 }
 }

 return taBytes;
}
</code></pre>
If you're interested in the reverse operation, ArrayBuffer to base64, you can find how to do it in the same link.

blocks|key|1048596|text|atob的结果是一个用逗号分隔的字符串。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1048597|，|blockquote|1048598|更简单的方法是将此字符串转换为json数组字符串，然后将其解析为byteArray，下面的代码可以简单地用于将base64转换为数字数组。|1048599|let+byteArray+=+JSON.parse('['%2Batob(base64)%2B']');+
let+buffer+=+new+Uint8Array(byteArray);|code-block|syntax|javascript|1048600|entityMap^0|B|2|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|U|8|@]|D|@]|E|$]]|$1|I|3|J|5|6|7|V|8|@]|D|@]|E|$]]|$1|K|3|L|5|M|7|W|8|@]|D|@]|E|$N|O]]|$1|P|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|Q|$]]

The result of atob is a string that is separated with some comma
<blockquote>
,
</blockquote>
A simpler way is to convert this string to a json array string and after that parse it to a byteArray
below code can simply be used to convert base64 to an array of number
<pre class="lang-js prettyprint-override"><code>let byteArray = JSON.parse('['+atob(base64)+']'); 
let buffer = new Uint8Array(byteArray);
</code></pre>

I need to convert a base64 encode string into an ArrayBuffer.
The base64 strings are user input, they will be copy and pasted from an email, so they're not there when the page is loaded.
I would like to do this in javascript without making an ajax call to the server if possible.

I found those links interesting, but they didt'n help me:

<a href="https://stackoverflow.com/questions/9267899/arraybuffer-to-base64-encoded-string">ArrayBuffer to base64 encoded string</a>

this is about the opposite conversion, from ArrayBuffer to base64, not the other way round

<a href="http://jsperf.com/json-vs-base64/2" rel="noreferrer">http://jsperf.com/json-vs-base64/2</a>

this looks good but i can't figure out how to use the code.

Is there an easy (maybe native) way to do the conversion? thanks

Convert base64 string to ArrayBuffer

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我需要将base64编码字符串转换为ArrayBuffer。base64字符串是用户输入的，它们将从电子邮件中复制和粘贴，所以当页面被加载时它们就不在了。我想在javascript中这样做，如果可能的话，不需要对服务器进行ajax调用。我觉得这些链接很有趣，但它们帮助了我：这是相反的转换，从ArrayBuffer到base64，而不是相反的。这看起来不错，但我不知道如何使用这些代码。是否有一种简单

问将base64字符串转换为ArrayBuffer
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将base64字符串转换为ArrayBufferEN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将base64字符串转换为ArrayBuffer
EN