How to convert blob to base64 encoding using JavaScript ?

Last Updated : 24 Jun, 2024

Blob in JavaScript is a fundamental data type representing bytes of data. It serves as the underlying structure for files and is supported by web browsers, capable of storing and retrieving data from memory. Blobs have specific sizes and file types like regular files and can be handled with Buffers, ideal for binary data storage such as images or files. Using the FileReader API, Blobs can be converted into Base64 encoded strings. This encoding is essential for transferring binary data over networks, ensuring compatibility across different protocols and reducing the risk of corruption during transmission.

Using file reader with readAsDataURL() method

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.

Example: To demonstrate converting blob to Base64 with FileReader API.

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

Using FileReader with readAsArrayBuffer()

Using 'FileReader' with 'readAsArrayBuffer()' allows converting data from a Blob into an ArrayBuffer, facilitating efficient manipulation and transformation of binary data in JavaScript applications.

Example: To demonstrate converting blob to base 64 encoding using JavaScript fileReader with readAsArrayBuffer() method.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Convert Blob to Base64 String</title>
</head>

<body>
    <script type="text/javascript">
        // Creating a Blob with text content
        let blob = new Blob(["Hello, world!"], { type: "text/plain" });

        // Creating a FileReader instance
        let reader = new FileReader();

        // Reading the Blob as an ArrayBuffer
        reader.readAsArrayBuffer(blob);

        // Event handler for when the FileReader has finished loading
        reader.onloadend = function () {
            // Obtaining the ArrayBuffer
            let buffer = reader.result;

            // Converting ArrayBuffer to Base64 string
            let base64data = btoa(String.fromCharCode.apply(null, new Uint8Array(buffer)));

            // Logging the Base64 encoded string
            console.log('Base64 encoded:', base64data);
        }
    </script>
</body>

</html>