I need an efficient (read native) way to convert an ArrayBuffer
to a base64 string which needs to be used on a multipart post.
19 Answers
function _arrayBufferToBase64( buffer ) {
var binary = '';
var bytes = new Uint8Array( buffer );
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode( bytes[ i ] );
}
return window.btoa( binary );
}
but, non-native implementations are faster e.g. https://gist.github.com/958841 see http://jsperf.com/encoding-xhr-image-data/6
Updated benchmarks: https://jsben.ch/wnaZC
-
17I tried the non-native implementation from the link and it took 1min and half to convert a 1M size buffer while the loop code above only took 1sec.– cshuJun 28, 2013 at 18:12
-
4I like the simplicity of this approach, but all that string concatenation can be costly. It looks like building an array of the characters and
join()
ing them at the end is significantly faster on Firefox, IE, and Safari (but quite a lot slower on Chrome): jsperf.com/tobase64-implementations– JLRisheMay 14, 2014 at 9:30 -
1I am trying 50mb pdf file upload using angualrjs and webapi2. I am using above line code , after upload file, the page got crashed and hanged . Below line of code ,I was used but getting null value in webapi method. "var base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));" please suggest any idea ... Nov 14, 2016 at 9:14
-
4I'm wondering why everyone is avoiding the native buffer
toString('base64')
method. Feb 20, 2020 at 13:56 -
16@JoãoEduardoSoareseSilva because not everyone is using Node - Node's
Buffer
doesn't exist in the browser.– AndrewApr 5, 2021 at 23:03
This works fine for me:
var base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));
In ES6, the syntax is a little simpler:
const base64String = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));
As pointed out in the comments, this method may result in a runtime error in some browsers when the ArrayBuffer
is large. The exact size limit is implementation dependent in any case.
-
60I like this method better for conciseness, but get a "maximum call stack size exceeded error". The loop technique above gets around that.– JasonSep 7, 2012 at 12:26
-
15I'm also getting a stack size error, so I used mobz's answer and it worked great. Sep 3, 2013 at 1:34
-
26It didn't work for large buffers. Slight modification to make it work:
btoa([].reduce.call(new Uint8Array(bufferArray),function(p,c){return p+String.fromCharCode(c)},''))
Nov 12, 2015 at 22:06 -
2I am trying 50mb pdf file upload using angualrjs and webapi2. I am using above line code , after upload file, the page got crashed and hanged . Below line of code ,I was used but getting null value in webapi method. "var base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));" please suggest any idea ... Nov 14, 2016 at 11:53
-
9@Kugel
btoa
is safe for characters in the code range 0-255, as this is here the case (Think about the 8 inUint8Array
).– GOTO 0Aug 24, 2017 at 6:59
For those who like it short, here's an other one using Array.reduce
which will not cause stack overflow:
var base64 = btoa(
new Uint8Array(arrayBuffer)
.reduce((data, byte) => data + String.fromCharCode(byte), '')
);
-
10Not sure if that's really sexy. After all, you're creating
<amount of Bytes in the buffer>
new strings.– NeonitMar 28, 2018 at 7:22 -
1How about
btoa(new Uint8Array(arraybuffer).reduce((data,byte)=>(data.push(String.fromCharCode(byte)),data),[]).join(''))
? Sep 12, 2018 at 0:30 -
2Another alternative:
btoa(Array.from(new Uint8Array(arraybuffer)).map(b => String.fromCharCode(b)).join(''))
. Sep 19, 2020 at 7:00 -
1Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range– RouRSep 24, 2021 at 14:22
There is another asynchronous way use Blob and FileReader.
I didn't test the performance. But it is a different way of thinking.
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"
-
Use
dataurl.split(',', 2)[1]
instead ofdataurl.substr(dataurl.indexOf(',')+1)
. Oct 31, 2018 at 21:40 -
3This doesn't seem to be guaranteed to work. According to w3c.github.io/FileAPI/#issue-f80bda5b
readAsDataURL
could theoretically return a percent encoded dataURI (And it seems it is actually the case in jsdom)– T SAug 22, 2019 at 19:00 -
-
split is shorter. but dataurl may contains one or more commas(,), split is not safe. Aug 28, 2019 at 9:55
The OP did not specify the Running Environment but if you are using Node.JS there is a very simple way to do such thing.
According with the official Node.JS docs https://nodejs.org/api/buffer.html#buffer_buffers_and_character_encodings
// This step is only necessary if you don't already have a Buffer Object
const buffer = Buffer.from(yourArrayBuffer);
const base64String = buffer.toString('base64');
Also, If you are running under Angular for example, the Buffer Class will also be made available in a Browser Environment.
-
-
5@jvatic I see, the OP did not clearly specify the Running Environment, so my answer is not incorrect, he only tagged
Javascript
. So I updated my answer to make it more concise. I think this is an important answer because I was searching how to do this and could not get to the best answer to the problem. Mar 10, 2020 at 17:50 -
I came to realize recently that the Question date precedes NodeJS itself, which is more reason that the Mods should add an addendum to the question, because these days most people are looking for a solution on nodeJS and get mislead by the popularity of the old answers. Nov 24, 2022 at 8:39
This example uses the built-in FileReader readDataURL() to do the conversion to base64 encoding. Data URLs are structured data:[<mediatype>][;base64],<data>
, so we split that url at the comma and return only the base64 encoded characters.
const blob = new Blob([array]);
const reader = new FileReader();
reader.onload = (event) => {
const dataUrl = event.target.result;
const [_, base64] = dataUrl.split(',');
// do something with base64
};
reader.readAsDataURL(blob);
Or as a promisified utility:
async function encode(array) {
return new Promise((resolve) => {
const blob = new Blob([array]);
const reader = new FileReader();
reader.onload = (event) => {
const dataUrl = event.target.result;
const [_, base64] = dataUrl.split(',');
resolve(base64);
};
reader.readAsDataURL(blob);
});
}
const encoded = await encode(typedArray);
-
4
-
-
1this is by far the fastest approach - tens of times faster than the other ones in my limited testing– jitinDec 28, 2019 at 15:55
-
i wish i'd found this solution like 8 hours again. my day would not have been wasted ;( thank you Jan 20, 2020 at 16:02
-
5
I used this and works for me.
function arrayBufferToBase64( buffer ) {
var binary = '';
var bytes = new Uint8Array( buffer );
var len = bytes.byteLength;
for (var i = 0; i < 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 < len; i++) {
bytes[i] = binary_string.charCodeAt(i);
}
return bytes.buffer;
}
-
-
4
-
1
My recommendation for this is to NOT use native btoa
strategies—as they don't correctly encode all ArrayBuffer
's…
rewrite the DOMs atob() and btoa()
Since DOMStrings are 16-bit-encoded strings, in most browsers calling window.btoa on a Unicode string will cause a Character Out Of Range exception if a character exceeds the range of a 8-bit ASCII-encoded character.
While I have never encountered this exact error, I have found that many of the ArrayBuffer
's I have tried to encode have encoded incorrectly.
I would either use MDN recommendation or gist.
-
-
3Very much this, so many snippets here that recommend the wrong thing! I've seen this error multiple times, where people blindly use atob and btoa.– KugelAug 24, 2017 at 4:53
-
14All array buffers should be encoded fine using the strategies in other answers, atob/btoa is only a problem for text that contains characters greater than 0xFF (which byte arrays by definition do not). The MDN warning doesn't apply because when using the strategy in the other answers you are guaranteed to have a string that only consists of ASCII characters as any value from a Uint8Array is guaranteed to be between 0 and 255 which means String.fromCharCode is guaranteed to return a character that is not out of range. Apr 29, 2019 at 6:44
-
This is the correct answer when btoa or Buffer are not available (react-native) May 14, 2021 at 18:42
Below are 2 simple functions for converting Uint8Array to Base64 String and back again
arrayToBase64String(a) {
return btoa(String.fromCharCode(...a));
}
base64StringToArray(s) {
let asciiString = atob(s);
return new Uint8Array([...asciiString].map(char => char.charCodeAt(0)));
}
-
2This is a confusing answer. That does not look look like valid JavaScript and is a Uint8Array an ArrayBuffer? Oct 20, 2018 at 15:06
-
@user1153660 Add the
function
keyword and it should work in a modern browser.– YetiNov 16, 2018 at 7:40 -
Awesome! btoa(String.fromCharCode(...a)); is shortest version I have seen so far to encode Uint8Array.– NicoloJun 27, 2019 at 8:37
-
4This looks good but if the array is too huge it will throw maximum call stack size exceeded error. Oct 16, 2019 at 17:54
If you're okay with adding a library, base64-arraybuffer:
yarn add base64-arraybuffer
then:
encode(buffer)
- Encodes ArrayBuffer into base64 stringdecode(str)
- Decodes base64 string to ArrayBuffer
-
1
This worked for me:
Buffer.from(myArrayBuffer).toString("base64");
-
Is this specific to NodeJS, and does it perform a copy in the
from
method? Apr 14 at 15:32 -
-
If I knew the answer I would not have asked, I'd have improved your answer instead :) Jul 5 at 12:47
ABtoB64(ab) {
return new Promise(res => {
const fr = new FileReader();
fr.onload = ({target: {result: s}}) => res(s.slice(s.indexOf(';base64,') + 8));
fr.readAsDataURL(new Blob([ab]));
});
}
asynchronous method using file reader.
You can derive a normal array from the ArrayBuffer
by using Array.prototype.slice
.
Use a function like Array.prototype.map
to convert bytes in to characters and join
them together to forma string.
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
}
This method is faster since there are no string concatenations running in it.
i use TextDecode
api to convert it to normal text and then convert it to Base64
const uint = new Uint8Array([ 73, 32, 108, 111, 118, 101, 32, 121, 111, 117 ]).buffer
const decoder = new TextDecoder()
const decodedText = decoder.decode(uint)
const base64Code = btoa(decodedText)
var uint8Array = new Uint8Array(BytesArray);
var base64Str = btoa(String.fromCharCode(...uint8Array));
Or,
var base64Str = btoa(uint8Array.reduce((x, y) => x + String.fromCharCode(y), ''));
In the Browser suggested solutions with btoa
seem fine.
But in Node.js btoa is Legacy
It is recommended to use buffer.toString(encoding)
like
const myString = buffer.toString("base64")
By my side, using Chrome navigator, I had to use DataView() to read an arrayBuffer
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++) {
binary += String.fromCharCode( lecteur_de_donnees.getUint8( i ) );
}
chaine = window.btoa( binary )
return chaine;}
function _arrayBufferToBase64(uarr) {
var strings = [], chunksize = 0xffff;
var len = uarr.length;
for (var i = 0; i * chunksize < len; i++){
strings.push(String.fromCharCode.apply(null, uarr.subarray(i * chunksize, (i + 1) * chunksize)));
}
return strings.join("");
}
This is better, if you use JSZip for unpack archive from string
FormData
and aBlob
from ArrayBuffer, append the blob to formdata and post binary data instead of base64.