Converter blob em base64

Este é um trecho para o código que eu quero fazer Blob para String Base64 :

Esta parte comentada funciona e que quando a URL gerada por esta é configurada para img src ela exibe a imagem:

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

O problema é com o código inferior, a variável de origem gerada é nula

Atualizar:

Existe uma maneira mais fácil de fazer isso com o JQuery para poder criar String Base64 do arquivo Blob como no código acima?

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

Forma os documentos readAsDataURL codificam para base64

isso funcionou para mim:

 var blobToBase64 = function(blob, cb) { var reader = new FileReader(); reader.onload = function() { var dataUrl = reader.result; var base64 = dataUrl.split(',')[1]; cb(base64); }; reader.readAsDataURL(blob); }; 

Então o problema é que você quer fazer o upload de uma imagem de base 64 e você tem uma URL de blob. Agora a resposta que funcionará em todos os navegadores html 5 é: 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 && data.Success) {}}, error: function(a,b,c){alert(c);} }); } 

Você pode corrigir o problema por:

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

Espero que isso lhe ajude

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

A maneira mais fácil em uma única linha de código

var base64Image = new Buffer (blob, ‘binário’) .toString (‘base64’);