Blob to Base64 in javascript

Question

I have successfully converted my base64 (DATA_URI) image into blob but not able to revert it back.

My base64 to blob code look like below for more info look this link.

b64toBlob(b64Data, contentType, sliceSize) {
    contentType = contentType || '';
    sliceSize = sliceSize || 512;

    var byteCharacters = atob(b64Data);
    var byteArrays = [];

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
    }

    var blob = new Blob(byteArrays, {type: contentType});
    return blob;
}

I am trying to convert my blob to base64 I get an error as

ERROR TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

here is my response for getting back my blob image res

I am invoking success callback but not able to under stand this

here is the code where I try to convert blob to base64

if(window.FileReader) {
          var reader = new FileReader();
          reader.readAsDataURL(blob); 
          reader.onloadend = () => {
              var base64data = reader.result;                
              console.log(base64data);
          }
        }

While debugging i am not able to see reader.onloadend it is null and i am not able to invoke it.

Any help??

How do you construct the blob that you're passing to reader.readAsDataURL()? — haim770
– haim770, Commented Apr 26, 2018 at 15:52
If all you have at hand is the string "1524751188817_blob", I'm not sure you can get a Blob out of it. The function b64toBlob that you're using is expecting the first parameter to be a base64-encoded string. — haim770
– haim770, Commented Apr 26, 2018 at 15:58
@haim770 actully that was wrong in which i have mentioned as blob as array of string actual result show the file something like this ØÿàJFIFHHÿáXExifMM*‡i& À Ðÿí8Photoshop 3.08BIM8BIM%ÔŒÙ²é€ ˜ìøB~ÿÀÐÀ"ÿÄ ÿÄµ}!1AQa"q2‘¡#B±ÁRÑð$3br,.... — Mohan Gopi
– Mohan Gopi, Commented May 7, 2018 at 13:14
im getting my Api response as _body is giving me string of blob/file someting like streemed data — Mohan Gopi
– Mohan Gopi, Commented May 7, 2018 at 13:16

RickTakes · Accepted Answer · 2018-04-26 15:50:16Z

1

I believe you need to define onloadend before you start reading the data. It is likely completing the read and firing the null function before you've assigned it. Or more precisely at the moment you call readAsDataURL, onloadend is null.

var reader = new FileReader();
reader.onloadend = () => {
  var base64data = reader.result;                
      console.log(base64data);
}

reader.readAsDataURL(blob);

edited Apr 26, 2018 at 15:50

answered Apr 26, 2018 at 15:47

RickTakes

1,1971 gold badge10 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mohan Gopi Over a year ago

can you elaborate your answer i am new to dealing with file

Mohan Gopi Over a year ago

still same issue

Collectives™ on Stack Overflow

Blob to Base64 in javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related