blocks|key|437019|text|function+_arrayBufferToBase64(+buffer+)+{
++++var+binary+=+'';
++++var+bytes+=+new+Uint8Array(+buffer+);
++++var+len+=+bytes.byteLength;
++++for+(var+i+=+0;+i+<+len;+i%2B%2B)+{
++++++++binary+%2B=+String.fromCharCode(+bytes[+i+]+);
++++}
++++return+window.btoa(+binary+);
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|437020|但是，非本机实现速度更快，例如https://gist.github.com/958841请参阅http://jsperf.com/encoding-xhr-image-data/6|unstyled|offset|length|437021|entityMap|0|LINK|mutability|MUTABLE|url|https://gist.github.com/958841|1|http://jsperf.com/encoding-xhr-image-data/6^0|0|F|U|0|1C|17|1|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|T|8|@]|9|@$G|U|H|V|1|W]|$G|X|H|Y|1|Z]]|A|$]]|$1|I|3|-4|5|F|7|10|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]|Q|$5|L|M|N|A|$O|R]]]]

<pre><code>function _arrayBufferToBase64( buffer ) {
 var binary = '';
 var bytes = new Uint8Array( buffer );
 var len = bytes.byteLength;
 for (var i = 0; i &lt; len; i++) {
 binary += String.fromCharCode( bytes[ i ] );
 }
 return window.btoa( binary );
}
</code></pre>
but, non-native implementations are faster e.g. <a href="https://gist.github.com/958841" rel="noreferrer">https://gist.github.com/958841</a>
see <a href="http://jsperf.com/encoding-xhr-image-data/6" rel="noreferrer">http://jsperf.com/encoding-xhr-image-data/6</a>

blocks|key|651460|text|这对我来说很好：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|651461|var+base64String+=+btoa(String.fromCharCode.apply(null,+new+Uint8Array(arrayBuffer)));|code-block|syntax|javascript|651462|在ES6中，语法要简单一点：|651463|const+base64String+=+btoa(String.fromCharCode(...new+Uint8Array(arrayBuffer)));|651464|正如注释中指出的，当ArrayBuffer很大时，此方法可能会在某些浏览器中导致运行时错误。在任何情况下，确切的大小限制都取决于实现。|offset|length|style|CODE|651465|entityMap^0|0|0|0|0|A|B|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@$M|X|N|Y|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

This works fine for me:
<pre><code>var base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));
</code></pre>
In ES6, the syntax is a little simpler:
<pre><code>const base64String = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));
</code></pre>
As pointed out in the comments, this method may result in a runtime error in some browsers when the <code>ArrayBuffer</code> is large. The exact size limit is implementation dependent in any case.

blocks|key|437384|text|对于那些喜欢它简短的人，这里有另一个使用Array.reduce的方法，它不会导致堆栈溢出：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|437385|var+base64+=+btoa(
++new+Uint8Array(arrayBuffer)
++++.reduce((data,+byte)+=>+data+%2B+String.fromCharCode(byte),+'')
);|code-block|syntax|javascript|437386|entityMap^0|K|C|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|$]]

For those who like it short, here's an other one using <code>Array.reduce</code> which will not cause stack overflow:

<pre><code>var base64 = btoa(
 new Uint8Array(arrayBuffer)
 .reduce((data, byte) =&gt; data + String.fromCharCode(byte), '')
);
</code></pre>

blocks|key|437206|text|还有另一种使用Blob和FileReader的异步方式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|437207|我没有测试性能。但这是一种不同的思考方式。|437208|function+arrayBufferToBase64(+buffer,+callback+)+{
++++var+blob+=+new+Blob([buffer],{type:'application/octet-binary'});
++++var+reader+=+new+FileReader();
++++reader.onload+=+function(evt){
++++++++var+dataurl+=+evt.target.result;
++++++++callback(dataurl.substr(dataurl.indexOf(',')%2B1));
++++};
++++reader.readAsDataURL(blob);
}

//example:
var+buf+=+new+Uint8Array([11,22,33]);
arrayBufferToBase64(buf,+console.log.bind(console));+//"CxYh"|code-block|syntax|javascript|437209|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

There is another asynchronous way use Blob and FileReader.

I didn't test the performance. But it is a different way of thinking.

<pre><code>function arrayBufferToBase64( buffer, callback ) {
 var blob = new Blob([buffer],{type:'application/octet-binary'});
 var reader = new FileReader();
 reader.onload = function(evt){
 var dataurl = evt.target.result;
 callback(dataurl.substr(dataurl.indexOf(',')+1));
 };
 reader.readAsDataURL(blob);
}

//example:
var buf = new Uint8Array([11,22,33]);
arrayBufferToBase64(buf, console.log.bind(console)); //"CxYh"
</code></pre>

blocks|key|651952|text|var+blob+=+new+Blob([arrayBuffer])

var+reader+=+new+FileReader();
reader.onload+=+function(event){
+++var+base64+=+++event.target.result
};

reader.readAsDataURL(blob);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|651953|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>var blob = new Blob([arrayBuffer])

var reader = new FileReader();
reader.onload = function(event){
 var base64 = event.target.result
};

reader.readAsDataURL(blob);
</code></pre>

blocks|key|437252|text|我使用了这个，并且为我自己工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|437253|function+arrayBufferToBase64(+buffer+)+{
++++var+binary+=+'';
++++var+bytes+=+new+Uint8Array(+buffer+);
++++var+len+=+bytes.byteLength;
++++for+(var+i+=+0;+i+<+len;+i%2B%2B)+{
++++++++binary+%2B=+String.fromCharCode(+bytes[+i+]+);
++++}
++++return+window.btoa(+binary+);
}



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|437254|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I used this and works for me.

<pre><code>function arrayBufferToBase64( buffer ) {
 var binary = '';
 var bytes = new Uint8Array( buffer );
 var len = bytes.byteLength;
 for (var i = 0; i &lt; len; i++) {
 binary += String.fromCharCode( bytes[ i ] );
 }
 return window.btoa( binary );
}



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>

blocks|key|651840|text|下面是两个简单的函数，用于将Uint8Array转换为Base64字符串，然后再转换回来|type|unstyled|depth|inlineStyleRanges|entityRanges|data|651841|arrayToBase64String(a)+{
++++return+btoa(String.fromCharCode(...a));
}

base64StringToArray(s)+{
++++let+asciiString+=+atob(s);
++++return+new+Uint8Array([...asciiString].map(char+=>+char.charCodeAt(0)));
}|code-block|syntax|javascript|651842|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Below are 2 simple functions for converting Uint8Array to Base64 String and back again

<pre><code>arrayToBase64String(a) {
 return btoa(String.fromCharCode(...a));
}

base64StringToArray(s) {
 let asciiString = atob(s);
 return new Uint8Array([...asciiString].map(char =&gt; char.charCodeAt(0)));
}
</code></pre>

blocks|key|652016|text|OP没有指定运行环境，但是如果您使用的是Node.JS，那么有一种非常简单的方法可以做到这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|652017|使用官方Node.JS文档https://nodejs.org/api/buffer.html#buffer_buffers_and_character_encodings进行折叠|offset|length|652018|//+This+step+is+only+necessary+if+you+don't+already+have+a+Buffer+Object
const+buffer+=+Buffer.from(yourArrayBuffer);

const+base64String+=+buffer.toString('base64');|code-block|syntax|javascript|652019|同样，如果你在Angular下运行，Buffer类也将在浏览器环境中可用。|652020|entityMap|0|LINK|mutability|MUTABLE|url|https://nodejs.org/api/buffer.html#buffer_buffers_and_character_encodings^0|0|D|21|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@$D|W|E|X|1|Y]]|A|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

The OP did not specify the Running Enviroment but if you are using Node.JS there is a very simple way to do such thing.

Accordig with the official Node.JS docs 
<a href="https://nodejs.org/api/buffer.html#buffer_buffers_and_character_encodings" rel="noreferrer">https://nodejs.org/api/buffer.html#buffer_buffers_and_character_encodings</a>

<pre><code>// This step is only necessary if you don't already have a Buffer Object
const buffer = Buffer.from(yourArrayBuffer);

const base64String = buffer.toString('base64');
</code></pre>

Also, If you are running under Angular for example, the Buffer Class will also be made available in a Browser Environment.

blocks|key|651680|text|您可以使用Array.prototype.slice从ArrayBuffer派生普通数组。使用像Array.prototype.map这样的函数将字节转换为字符，然后将它们join在一起形成字符串。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|651681|function+arrayBufferToBase64(ab){

++++var+dView+=+new+Uint8Array(ab);+++//Get+a+byte+view++++++++

++++var+arr+=+Array.prototype.slice.call(dView);+//Create+a+normal+array++++++++

++++var+arr1+=+arr.map(function(item){++++++++
++++++return+String.fromCharCode(item);++++//Convert
++++});

++++return+window.btoa(arr1.join(''));+++//Form+a+string

}|code-block|syntax|javascript|651682|此方法速度更快，因为没有字符串连接在其中运行。|651683|entityMap^0|5|L|R|B|1C|J|2E|4|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|N|$]]

You can derive a normal array from the <code>ArrayBuffer</code> by using <code>Array.prototype.slice</code>. 
Use a function like <code>Array.prototype.map</code> to convert bytes in to characters and <code>join</code> them together to forma string.

<pre><code>function arrayBufferToBase64(ab){

 var dView = new Uint8Array(ab); //Get a byte view 

 var arr = Array.prototype.slice.call(dView); //Create a normal array 

 var arr1 = arr.map(function(item){ 
 return String.fromCharCode(item); //Convert
 });

 return window.btoa(arr1.join('')); //Form a string

}
</code></pre>

This method is faster since there are no string concatenations running in it.

blocks|key|437684|text|在浏览器和Node.js中使用uint8-to-b64包进行编码/解码|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|437685|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/uint8-to-b64^0|F|C|F|C|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

Use <a href="https://www.npmjs.com/package/uint8-to-b64" rel="nofollow noreferrer"><code>uint8-to-b64</code></a> package to do encoding/decoding in browser and Node.js

blocks|key|437534|text|在我身边，使用Chrome+navigator时，我必须使用DataView()来读取arrayBuffer|type|unstyled|depth|inlineStyleRanges|entityRanges|data|437535|function+_arrayBufferToBase64(+tabU8A+)+{
var+binary+=+'';
let+lecteur_de_donnees+=+new+DataView(tabU8A);
var+len+=+lecteur_de_donnees.byteLength;
var+chaine+=+'';
var+pos1;
for+(var+i+=+0;+i+<+len;+i%2B%2B)+{
++++binary+%2B=+String.fromCharCode(+lecteur_de_donnees.getUint8(+i+)+);
}
chaine+=+window.btoa(+binary+)
return+chaine;}|code-block|syntax|javascript|437536|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

By my side, using Chrome navigator, I had to use DataView() to read an arrayBuffer

<pre><code>function _arrayBufferToBase64( tabU8A ) {
var binary = '';
let lecteur_de_donnees = new DataView(tabU8A);
var len = lecteur_de_donnees.byteLength;
var chaine = '';
var pos1;
for (var i = 0; i &lt; len; i++) {
 binary += String.fromCharCode( lecteur_de_donnees.getUint8( i ) );
}
chaine = window.btoa( binary )
return chaine;}
</code></pre>

blocks|key|437157|text|function+_arrayBufferToBase64(uarr)+{
++++var+strings+=+[],+chunksize+=+0xffff;
++++var+len+=+uarr.length;

++++for+(var+i+=+0;+i+*+chunksize+<+len;+i%2B%2B){
++++++++strings.push(String.fromCharCode.apply(null,+uarr.subarray(i+*+chunksize,+(i+%2B+1)+*+chunksize)));
++++}

++++return+strings.join("");
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|437158|如果您使用JSZip从字符串解压缩归档文件，这会更好|unstyled|437159|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>function _arrayBufferToBase64(uarr) {
 var strings = [], chunksize = 0xffff;
 var len = uarr.length;

 for (var i = 0; i * chunksize &lt; len; i++){
 strings.push(String.fromCharCode.apply(null, uarr.subarray(i * chunksize, (i + 1) * chunksize)));
 }

 return strings.join("");
}
</code></pre>

This is better, if you use JSZip for unpack archive from string

I need an efficient (read native) way to convert an <code>ArrayBuffer</code> to a base64 string which needs to be used on a multipart post.

ArrayBuffer to base64 encoded string

我需要一个有效的(读原生)的方式来转换一个ArrayBuffer到一个base64字符串，这需要在一个多部分的帖子使用。

问ArrayBuffer到base64编码的字符串
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ArrayBuffer到base64编码的字符串EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ArrayBuffer到base64编码的字符串
EN