Convert blob to base64

Question

This is a snippet for the code that I want to do Blob to Base64 string   This commented part works and that when the URL generated by this is set to img src it displays the image   var blob   items i  getAsFile      var URLObj   window URL    window webkitURL    var source   URLObj createObjectURL blob     console log  image source     source    var reader   new FileReader    reader onload   function event   console log event target result        data url  var source   reader readAsBinaryString blob     The problem is with the the lower code  the source variable generated is null  Update    Is there an easier way to do this with JQuery to be able to create Base64 String from Blob file as in the code above

User · Answer

There is a pure JavaSript way that is not depended on any stacks:

const blobToBase64 = blob => {
  const reader = new FileReader();
  reader.readAsDataURL(blob);
  return new Promise(resolve => {
    reader.onloadend = () => {
      resolve(reader.result);
    };
  });
};

For using this helper function you should set a callback, example:

blobToBase64(blobData).then(res => {
  // do what you wanna do
  console.log(res); // res is base64 now
});

I write this helper function for my problem on React Native project, I wanted to download an image and then store it as a cached image:

fetch(imageAddressAsStringValue)
  .then(res => res.blob())
  .then(blobToBase64)
  .then(finalResult => { 
    storeOnMyLocalDatabase(finalResult);
  });

User · Answer

So the problem is that you want to upload a base 64 image and you have a blob url  Now the answer that will work on all html 5 browsers is  Do     var fileInput   document getElementById  myFileInputTag      var preview   document getElementById  myImgTag       fileInput addEventListener  change   function  e          var url   URL createObjectURL e target files 0          preview setAttribute  src   url         function Upload             preview can be image object or image element      var myCanvas   document getElementById  MyCanvas         var ctx   myCanvas getContext  2d         ctx drawImage preview  0 0        var base64Str   myCanvas toDataURL           ajax            url    PathToServer            method   POST            data                 imageString  base64Str                  success  function data    if data  amp  amp  data Success            error  function a b c  alert c

User · Answer

I wanted something where I have access to base64 value to store into a list and for me adding event listener worked  You just need the FileReader which will read the image blob and return the base64 in the result  createImageFromBlob image  Blob        const reader   new FileReader        const supportedImages          you can also refer to some global variable     reader addEventListener         load              gt               reader result will have the required base64 image         const base64data   reader result          supportedImages push base64data      this can be a reference to global variable and store the value into that global list so as to use it in the other part                false               The readAsDataURL method is used to read the contents of the specified Blob or File      if  image          reader readAsDataURL image             Final part is the readAsDataURL which is very important is being used to read the content of the specified Blob

User · Answer

var reader   new FileReader     reader readAsDataURL blob     reader onloadend   function          var base64data   reader result                       console log base64data       Form the docs readAsDataURL encodes to base64

User · Answer

Another way is to use a simple wrapper around FileReader returning Observable    function toBase64 blob  Blob   Observable lt string gt        const reader   new FileReader        reader readAsDataURL blob       return fromEvent reader   load          pipe map      gt   reader result as string  split      1          Usage  toBase64 blob  subscribe base64   gt  console log base64

User · Answer

var audioURL   window URL createObjectURL blob   audio src   audioURL   var reader   new window FileReader    reader readAsDataURL blob   reader onloadend   function           base64data   reader result       console log base64data

User · Answer

this worked for me   var blobToBase64   function blob  callback        var reader   new FileReader        reader onload   function             var dataUrl   reader result          var base64   dataUrl split      1           callback base64              reader readAsDataURL blob

User · Answer

function bufferToBinaryString arrayBuffer       return String fromCharCode    new Uint8Array arrayBuffer       async      gt  console log btoa bufferToBinaryString await new Response blob  arrayBuffer            or  function bufferToBinaryString arrayBuffer       return String fromCharCode    new Uint8Array arrayBuffer      new Response blob  arrayBuffer   then arr buf   gt  console log btoa bufferToBinaryString arr buf        see Response s constructor  you can turn  blob  buffer source form data  readable stream  etc   into Response  which can then be turned into  json  text  array buffer  blob  with async method callbacks   edit  as  Ralph mentioned  turning everything into utf-8 string causes problems  unfortunately Response API doesn t provide a way converting to binary string   so array buffer is use as intermediate instead  which requires two more steps  converting it to byte array THEN to binary string   if you insist on using native btoa method

User · Answer

async function blobToBase64 blob      return new Promise  resolve       gt        const reader   new FileReader        reader onloadend        gt  resolve reader result       reader readAsDataURL blob            let blob   null      lt   your blob object goes here  blobToBase64 blob     then base64String   gt  console log base64String     See also   https   gist github com moosetraveller 723987931308c9ec63725c14cdcbc3e7

User · Answer

you can fix problem by   var canvas       canvas     var b64Text   canvas toDataURL    b64Text   b64Text replace  data amp colon image png base64        var base64Data   b64Text    I hope this help you

User · Answer

Most easiest way in a single line of code      var base64Image   new Buffer  blob   binary    toString  base64

[javascript] Convert blob to base64

Examples related to javascript

Examples related to jquery