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

Je voulais quelque chose où j'ai accès à une valeur base64 pour la 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 la 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 et qui est utilisé pour lire le contenu du Blob spécifié.

Answer 2

Peut-être que je rate quelque chose mais

let encoded = btoa(await myblob.text());

... est tout ce qu'il faut faire pour encoder une Blob en base64. Voir Blob.text() y btoa() .

Ou si vous voulez le tout comme une promesse :

let encode = myblob.text().then(btoa);

PS : Pour décoder le retour à un Blob : new Blob([atob(encoded)])

Answer 3

Variante asynchrone de TypeScript :

async function blobToBase64Async(blob: Blob): Promise<string> {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.onerror = (e) => reject(fileReader.error);
    fileReader.onloadend = (e) => {
      const dataUrl = fileReader.result as string;
      // remove "data:mime/type;base64," prefix from data url
      const base64 = dataUrl.substring(dataUrl.indexOf(',') + 1);
      resolve(base64);
    };
    fileReader.readAsDataURL(blob);
  });
}

Exemple d'utilisation :

async function fetchToBase64Async(url: string, init?: RequestInit): Promise<string> {
  try {
    const response = await fetch(url, init);
    if (!response.ok) {
      const responseText = await response.text();
      throw new Error("server status: " + response.status + "\n" + "server response:" + "\n" + responseText);
    }
    const blob = await response.blob();
    const base64 = await blobToBase64Async(blob);
    return base64;
  } catch (e) {
    throw new Error("failed to fetch: " + url + "\n" + "caused by: " + e);
  }
}

async function demoUsage() {
  const base64 = await fetchToBase64Async("https://httpstat.us/200", {
    method: "POST",
    headers: {
      "Accept": "*/*",
      "Authorization": "Bearer ...",
    }
  });
  console.log(base64);
}

Notas:

• Je ne comprends pas pourquoi certaines réponses utilisent l'option load au lieu de la loadend événement
• Je ne comprends pas pourquoi certaines réponses appellent readAsDataURL avant d'activer le gestionnaire d'événements