Convert base64 string into byte array through javascript

Question

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.

Answer 1

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

Answer 2

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

Answer 3

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.