How to Convert a Blob to a Base64 String in JavaScript?

Convert Blob to Base64 Using FileReader

In JavaScript, you may encounter a situation where you need to convert a Blob object, which typically represents an image or a file, to a Base64 string. This conversion is necessary when you need to store or transmit the binary data in a text format, such as sending it over HTTP or storing it in a database.

The code snippet you provided, using the Blob and FileReader APIs, aims to perform this conversion. However, you mentioned an issue where the source variable is returning null.

Using FileReader for Blob to Base64

The solution to this issue is to modify the code to correctly use the FileReader. Here's the updated code:

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

In this code, the readAsDataURL() method is used to encode the Blob data as a Base64 string. The onloadend event handler is then used to retrieve the base64-encoded data from the reader.result property.

Easier Method with jQuery

Alternatively, you can consider using jQuery for a more concise implementation:

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

Note that the jQuery Ajax method will handle sending the encoded Base64 string along with the form data, making it a more convenient approach.

Removing the Data-URL Declaration

It's important to note that the Blob's result will include a Data-URL declaration preceding the Base64-encoded data. To retrieve only the Base64 encoded string, you can use the following code:

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

The above is the detailed content of How to Convert a Blob to a Base64 String in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!