title: Blob to Base64 in javascript
body: <p>I have successfully converted my base64 (DATA_URI) image into blob but not able to revert it back.</p>
  
  <p>My base64 to blob code look like below for more info look this <a href="https://ourcodeworld.com/articles/read/322/how-to-convert-a-base64-image-into-a-image-file-and-upload-it-with-an-asynchronous-form-using-jquery" rel="nofollow noreferrer">link</a>.</p>
  
  <pre><code>b64toBlob(b64Data, contentType, sliceSize) {
      contentType = contentType || '';
      sliceSize = sliceSize || 512;
  
      var byteCharacters = atob(b64Data);
      var byteArrays = [];
  
      for (var offset = 0; offset &lt; byteCharacters.length; offset += sliceSize) {
          var slice = byteCharacters.slice(offset, offset + sliceSize);
  
          var byteNumbers = new Array(slice.length);
          for (var i = 0; i &lt; 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;
  }
  </code></pre>
  
  <p>I am trying to convert my blob to base64 I get an error as </p>
  
  <blockquote>
    <p>ERROR TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.</p>
  </blockquote>
  
  <p>here is my response for getting back my blob image res <a href="https://i.stack.imgur.com/UlPCW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UlPCW.png" alt="link"></a></p>
  
  <p>I am invoking success callback but not able to under stand this</p>
  
  <p>here is the code where I try to convert blob to base64</p>
  
  <pre><code>if(window.FileReader) {
            var reader = new FileReader();
            reader.readAsDataURL(blob); 
            reader.onloadend = () =&gt; {
                var base64data = reader.result;                
                console.log(base64data);
            }
          }
  </code></pre>
  
  <p>While debugging i am not able to see <code>reader.onloadend</code> it is null and i am not able to invoke it.</p>
  
  <p>Any help??</p>