Convert Blob base64

Question

Dies ist ein Ausschnitt für den Code, ich will Blob-Base64 Zeichenfolge tun:

Dieser kommentierte Teil funktioniert und dass, wenn die URL durch diese erzeugte eingestellt ist img src es das Bild zeigt:

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

das Problem mit dem unteren Code ist, erzeugt die Quelle Variable null

Update:

Gibt es eine einfachere Möglichkeit, dies mit JQuery zu tun, um Base64 String aus Blob-Datei wie im obigen Code zu erstellen?

Answer 1

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

Formular die docsreadAsDataURL codiert zu base64

Answer 2

dies für mich gearbeitet:

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

Answer 3

Sie können Problem beheben, indem:

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

Ich hoffe, das hilft Ihnen

Answer 4

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 5

Also das Problem ist, dass Sie eine Base 64 Bild hochladen möchten und Sie eine Blob-URL haben. Nun ist die Antwort, die auf allen HTML-5-Browsern funktionieren ist: 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);} 
    }); 
}