I want to convert "base64" string into bytes array through the javascript.

I received string from the URL like.

 ("data:image/jpeg;base64,/9j/4QN6RXhpZgAASUkqAAgAAAAIA)

And i want to convert the string into bytes array. because i need this byte array to send Rest API endpoint. The rest API Content-type=application/octet-stream.

I want to convert "base64" string into bytes array through the javascript.

I received string from the URL like.

 ("data:image/jpeg;base64,/9j/4QN6RXhpZgAASUkqAAgAAAAIA)

And i want to convert the string into bytes array. because i need this byte array to send Rest API endpoint. The rest API Content-type=application/octet-stream.

• javascript
• arrays

• Possible duplicate of Creating a Blob from a base64 string in JavaScript – Num Lock Commented Feb 21, 2017 at 7:23
• Possible duplicate of Convert base64 string to ArrayBuffer – Muhammad Saqlain Commented Feb 21, 2017 at 7:24

3 Answers 3

You can use XMLHttpRequest to do the dirty work for you:

var url = document.createElement("canvas").toDataURL(); // some data-uri

var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.responseType = "arraybuffer";
xhr.onload = function() {
  // result = ArrayBuffer, from here assign a view to it
  if (xhr.status === 200) console.log(new Uint8Array(xhr.response));
};
xhr.send();

It's a little more code than using atob() but all conversion happens internally. It's async too which can help with larger Data-URIs.

In newer browsers (which supports it) you can instead use fetch():

// note: atm not all browsers support these features.
fetch(document.createElement("canvas").toDataURL())  // pass in some data-uri
  .then(function(response) {return response.arrayBuffer()})
  .then(function(buffer) {
    console.log(new Uint8Array(buffer));
  });

You can try with the following;

function test(base64StringFromURL)
{
   var parts = base64StringFromURL.split(";base64,");
   var contentType = parts[0].replace("data:", "");
   var base64 = parts[1];
   var byteArray = base64ToByteArray(base64);
   ..
}

function base64ToByteArray(base64String) {
        try {            
            var sliceSize = 1024;
            var byteCharacters = atob(base64String);
            var bytesLength = byteCharacters.length;
            var slicesCount = Math.ceil(bytesLength / sliceSize);
            var byteArrays = new Array(slicesCount);

            for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
                var begin = sliceIndex * sliceSize;
                var end = Math.min(begin + sliceSize, bytesLength);

                var bytes = new Array(end - begin);
                for (var offset = begin, i = 0; offset < end; ++i, ++offset) {
                    bytes[i] = byteCharacters[offset].charCodeAt(0);
                }
                byteArrays[sliceIndex] = new Uint8Array(bytes);
            }
            return byteArrays;
        } catch (e) {
            console.log("Couldn't convert to byte array: " + e);
            return undefined;
        }
    }

This would prove to be much short solution.

const byteArray = new Buffer(base64String.replace(/^[\w\d;:\/]+base64\,/g, ''), 'base64');

base64String is the string containing the base 64 string.

byteArray is the array you need.

The regex replacement is optional and is just there to deal with prefix as in the case of dataurl string.