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

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 Constructeur de la réponse vous pouvez tourner [blob, buffer source form data, readable stream, etc.] en Réponse qui peut ensuite être transformé en [json, text, array buffer, blob] avec des méthodes/rappels asynchrones.

edit : comme @Ralph l'a mentionné, convertir tout en chaîne utf-8 pose des problèmes (malheureusement l'API de réponse ne fournit pas de moyen de convertir en chaîne binaire), donc tampon d'affichage est utilisé comme intermédiaire à la place, ce qui nécessite deux étapes supplémentaires (conversion en tableau d'octets, puis en chaîne binaire), si vous insistez pour utiliser le format natif btoa méthode.

Answer 2

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

let blob = null; // <= your blob object goes here

blobToBase64(blob)
  .then(base64String => console.log(base64String));

Voir aussi :

• https://gist.github.com/moosetraveller/723987931308c9ec63725c14cdcbc3e7

Answer 3

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

Answer 4

Une autre façon de procéder consiste à utiliser une enveloppe simple autour de la fonction FileReader en retournant sur Observable (l'extrait est dans TypeScript ):

  function toBase64(blob: Blob): Observable<string> {
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    return fromEvent(reader, 'load')
      .pipe(map(() => (reader.result as string).split(',')[1]));
  }

Utilisation :

toBase64(blob).subscribe(base64 => console.log(base64));

Answer 5

Version typographique :

const blob2Base64 = (blob:Blob):Promise<string> => {
      return new Promise<string> ((resolve,reject)=> {
           const reader = new FileReader();
           reader.readAsDataURL(blob);
           reader.onload = () => resolve(reader.result.toString());
           reader.onerror = error => reject(error);
       })
      }

l'usage :

blob2Base64(blob).then(res=>console.log(res))