Convert blob to base64

Question

This is the code snippet that I want to make Blob before Base64 :

This part of the comment works, and when the URL generated with this parameter 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 with the lower code, the generated source variable is null

Update:

Is there an easier way to do this using jQuery to be able to create a Base64 String from a blob file, as in the above code?

Answer 1

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

Generate documents readAsDataURL encodes in base64

Answer 2

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

Answer 3

So the problem is that you want to load the base image 64, and you have the URL of the blob. Now an answer that will work in all HTML 5: Do browsers:

  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 && data.Success) {}}, error: function(a,b,c){alert(c);} }); } 

Answer 4

you can fix the problem:

 var canvas = $('#canvas'); var b64Text = canvas.toDataURL(); b64Text = b64Text.replace('data:image/png;base64,',''); var base64Data = b64Text; 

I hope this helps you

Answer 5

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

Answer 6

The easiest way in one line of code

var base64Image = new buffer (blob, 'binary'). toString ('base64');

Answer 7

 (async () => console.log(btoa(await new Response(blob).text())))(); 

or

 new Response(blob).text().then(t => console.log(btoa(t))) 

see Constructor of responses , you can turn [blob, buffer source form data, readable stream, etc.] into Response , which can then be turned into [json, text, array buffer, blob] which performs the asynchronous method / callbacks.