Converti BLOB in Base64

Questo è uno snippet per il codice che voglio fare Blobper Base64stringa:

Questa parte commentata funziona e che quando l'URL generato da questo è impostato su img src visualizza l'immagine:

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

Il problema è con il codice inferiore, la variabile di origine generata è nulla

Aggiornare:

C'è un modo più semplice per farlo con JQuery per poter creare Base64 String dal file BLOB come nel codice sopra?

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

Formare i documenti readAsDataURL codificati in base64

questo ha funzionato per 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);
};

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

Esiste un modo JavaSript puro che non dipende da alcuna pila:

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

Per utilizzare questa funzione di supporto è necessario impostare un callback, ad esempio:

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

Scrivo questa funzione di supporto per il mio problema sul progetto React Native, volevo scaricare un'immagine e quindi memorizzarla come immagine memorizzata nella cache:

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

function bufferToBinaryString(arrayBuffer){
    return String.fromCharCode(...new Uint8Array(arrayBuffer));
}
(async () => console.log(btoa(bufferToBinaryString(await new Response(blob).arrayBuffer()))))();

o

function bufferToBinaryString(arrayBuffer){
    return String.fromCharCode(...new Uint8Array(arrayBuffer));
}
new Response(blob).arrayBuffer().then(arr_buf => console.log(btoa(bufferToBinaryString(arr_buf)))))

vedi il costruttore di Response , puoi trasformarlo [blob, buffer source form data, readable stream, etc.]in Response , che può quindi essere trasformato in[json, text, array buffer, blob] metodo / callback asincrono.

modifica: come accennato da @Ralph, trasformare tutto in stringa utf-8 causa problemi (purtroppo l'API di risposta non fornisce un modo per convertire in stringa binaria), quindi il buffer dell'array viene utilizzato come intermedio, il che richiede altri due passaggi (convertendolo in array di byte POI a stringa binaria), se si insiste sull'uso del btoametodo nativo .

puoi risolvere il problema:

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

Spero che questo ti sia d'aiuto

Quindi il problema è che vuoi caricare un'immagine di base 64 e hai un URL BLOB. Ora la risposta che funzionerà su tutti i browser html 5 è:

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

Volevo qualcosa in cui avessi accesso al valore base64 da archiviare in un elenco e per me l'aggiunta di listener di eventi ha funzionato. Hai solo bisogno del FileReader che leggerà il BLOB di immagini e restituirà la base64 nel risultato.

createImageFromBlob(image: Blob) {
    const reader = new FileReader();
    const supportedImages = []; // you can also refer to some global variable
    reader.addEventListener(
      'load',
      () => {
        // 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);
    }
 }

La parte finale è readAsDataURL che è molto importante per la lettura del contenuto del BLOB specificato

Il modo più semplice in una singola riga di codice

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