Comment convertir un blob en chaîne Base64 en JavaScript ?

Convertir un objet Blob en Base64 à l'aide de FileReader

En JavaScript, vous pouvez rencontrer une situation dans laquelle vous devez convertir un objet Blob, qui représente généralement une image ou un fichier, à une chaîne Base64. Cette conversion est nécessaire lorsque vous devez stocker ou transmettre les données binaires dans un format texte, par exemple en les envoyant via HTTP ou en les stockant dans une base de données.

L'extrait de code que vous avez fourni, à l'aide des API Blob et FileReader. , vise à effectuer cette conversion. Cependant, vous avez mentionné un problème où la variable source renvoie null.

Utilisation de FileReader pour Blob vers Base64

La solution à ce problème consiste à modifier le code pour utiliser correctement FileReader. Voici le code mis à jour :

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

Dans ce code, la méthode readAsDataURL() est utilisée pour encoder les données Blob sous forme de chaîne Base64. Le gestionnaire d'événements onloadend est ensuite utilisé pour récupérer les données codées en base64 à partir de la propriété reader.result.

Méthode plus simple avec jQuery

Vous pouvez également envisager d'utiliser jQuery pour une implémentation plus concise :

$.ajax({
  url: "upload.php", // URL to submit the form
  type: "POST",
  data: {
    image: blob
  },
  beforeSend: function(xhr) {
    // Encode the blob as a base64 string
    var reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onloadend = function() {
      // Append the encoded data to the form data
      var data = reader.result;
      xhr.setRequestHeader("Image-Data", data);
    }
  }
});

Notez que la méthode jQuery Ajax gérera l'envoi de la chaîne codée en Base64 avec le formulaire data, ce qui en fait une approche plus pratique.

Suppression de la déclaration Data-URL

Il est important de noter que le résultat du Blob inclura une 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, vous pouvez utiliser le code suivant :

var base64String = base64data.substring(base64data.indexOf(',') + 1);

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!