How to convert blob to base64 encoding using JavaScript ?

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:

  • filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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);
      
        var reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onloadend = function () {
        var 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>

    chevron_right

    
    

  • Output:
    Final Output

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.