Open In App

How to convert blob to base64 encoding using JavaScript ?

Improve
Improve
Like Article
Like
Save
Share
Report

Blob is a fundamental data type in JavaScript. Blob stands for Binary Large Object and it is a representation of bytes of data. Web browsers support the Blob data type for holding data. Blob is the underlying data structure for the File object and the FileReader API. Blob has a specific size and file type just like ordinary files and it can be stored and retrieved from the system memory. Blob can also be converted and read as Buffers. Buffers are very handy to store binary data such as the binary data of an image or a file. We will be using the FileReader API to convert Blob to a Base64 Encoded String in JavaScript.

We cannot transfer Binary data over a Network in its raw format. This is because the raw bytes may be interpreted incorrectly due to the different protocols involved in the Network. There is also a higher chance of it being corrupted while being transferred over the Network. Hence this binary data is encoded into characters using Base64 encoding before being transferred over the network such as in email attachments, HTML form data, etc. Base64 encoding is a way of converting arbitrary Binary data into ASCII characters. Base64 encoding is used so that we do not have to rely on external files and scripts in web browsers.

Example: Convert Blob to Base64 Encoded String using FileReader API. The FileReader.readAsDataURL() reads the contents of the specified Blob data type and will return a Base64 Encoded String with data: attribute. The FileReader.onloadend Event is fired when the reading of the data has been completed successfully or when an error is encountered. We have created a sample Blob using the Blob() constructor. The constructor takes in values in a String[] and an Object consisting of the String type.

Program:

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Convert Blob to Base64 String</title>
</head>
 
<body>
    <div>Hello GeeksForGeeks</div>
    <script type="text/javascript">
        let blob = new Blob(["GeeksForGeeks"],
            { type: "text/plain" });
        // The full Blob Object can be seen
        // in the Console of the Browser
        console.log('Blob - ', blob);
 
        let reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onloadend = function () {
        let base64String = reader.result;
        console.log('Base64 String - ', base64String);
 
        // Simply Print the Base64 Encoded String,
         // without additional data: Attributes.
         console.log('Base64 String without Tags- ',
         base64String.substr(base64String.indexOf(', ') + 1));
        }
    </script>
</body>
 
</html>


Output:Final Output



Last Updated : 14 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads