Convertir le blob en base64

Ceci est un extrait du code que je veux faire Blobpour Base64string:

Cette partie commentée fonctionne et que lorsque l'URL générée par ceci est définie sur 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 avec le code inférieur, la variable source générée est nulle

Mettre à jour:

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

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

Former les documents readAsDataURL encodés en base64

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

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

Il existe une méthode JavaSript pure 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'assistance, vous devez définir un rappel, par exemple:

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

J'écris cette fonction d'aide pour mon problème sur le projet React Native, je voulais télécharger une image puis la stocker en tant qu'image en 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()))))();

ou

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

voir le constructeur de Response , vous pouvez le transformer [blob, buffer source form data, readable stream, etc.]en Response , qui peut ensuite être transformé en [json, text, array buffer, blob]avec la méthode async / les rappels.

edit: comme @Ralph l'a mentionné, transformer tout en chaîne utf-8 pose des problèmes (malheureusement l'API Response ne fournit pas un moyen de conversion en chaîne binaire), donc le tampon de tableau est utilisé à la place comme intermédiaire, ce qui nécessite deux étapes supplémentaires (le convertir en byte array THEN en chaîne binaire), si vous insistez sur l'utilisation de la btoaméthode native .

vous pouvez résoudre le problème en:

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

J'espère que cela vous aidera

Donc, le problème est que vous souhaitez 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);}
     });
 }

Je voulais quelque chose où j'ai accès à la valeur base64 pour stocker dans une liste et pour moi l'ajout d'un écouteur d'événements a fonctionné. Vous avez juste besoin du FileReader qui lira le blob d'image et retournera le base64 dans le résultat.

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 dernière partie est le readAsDataURL qui est très important est utilisé pour lire le contenu de l'objet blob spécifié

Le moyen le plus simple en une seule ligne de code

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