Convertir le blob en base64

Question

Voici un extrait du code que je veux faire Blob a Base64 chaîne :

Cette partie commentée fonctionne et lorsque l'URL générée par celle-ci est définie comme img src, elle affiche l'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);

Le problème est que dans le code inférieur, la variable source générée est nulle.

Mise à jour :

Existe-t-il un moyen plus simple de faire cela avec JQuery pour pouvoir créer une chaîne Base64 à partir d'un fichier Blob comme dans le code ci-dessus ?

Answer 1

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

Formez le docs readAsDataURL encode en base64

En tant que await fonction capable :

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

Remarque : le résultat du blob ne peut pas être directement décodé en Base64 sans avoir préalablement supprimé la déclaration Data-URL précédant les données codées en Base64. Pour récupérer uniquement la chaîne encodée en Base64, supprimez d'abord data : / ;base64, à partir du résultat.

Answer 2

Cela a fonctionné pour moi :

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

Il existe une méthode purement JavaScript qui ne dépend d'aucune pile :

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

Pour utiliser cette fonction d'aide, vous devez définir une fonction de rappel, par exemple :

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

---

J'ai écrit cette fonction d'aide pour mon problème sur le projet React Native, je voulais télécharger une image et ensuite la stocker comme une image en cache :

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

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

Le problème est donc que vous voulez télécharger une image de base 64 et que vous avez une url blob. Maintenant la réponse qui fonctionnera sur tous les navigateurs html 5 est : Faites :

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