Converting blobs to strings and vice versa in Javascript

Question

Converting blobs to strings and vice versa in Javascript

After successfully converting a blob to a string using FileReader, the challenge now is to convert it back:

var reader = new window.FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
   base64data = reader.result;
   var blobToSend = base64data.substr(base64data.indexOf(',')+1);
   rtcMultiConnection.send({"command":{
       "recording":blobToSend,
       "type":blob.type,
       "size":blob.size
   }});
}

The above code snippet is used in conjunction with https://github.com/muaz-khan/RTCMultiConnection. However, the main inquiry remains on how to reconstruct the blob after it has been sent. It appears that sending the blob as-is did not produce the desired results.

javascript filereader

Answer 1

Answer №1

source: Creating a Blob from a base64 string in JavaScript This function is a reliable way to convert base64 data back to its original binary form. To enhance performance, the data is processed in blocks of the specified sliceSize. Please note that the source code is written in TypeScript.

    public static Base64ToBlob(b64Data, contentType = "", sliceSize = 512): Blob
    {
        const byteCharacters = atob(b64Data);
        const byteArrays = [];

        for (let offset = 0; offset < byteCharacters.length; offset += sliceSize)
        {
            const slice = byteCharacters.slice(offset, offset + sliceSize);
            const byteNumbers = new Array(slice.length);

            for (let i = 0; i < slice.length; i++)
            {
                byteNumbers[i] = slice.charCodeAt(i);
            }

            const byteArray = new Uint8Array(byteNumbers);
            byteArrays.push(byteArray);
        }

        const blob = new Blob(byteArrays, { type: contentType });
        return blob;
    }

Answer 2

source: Creating a Blob from a base64 string in JavaScript This function is a reliable way to convert base64 data back to its original binary form. To enhance performance, the data is processed in blocks of the specified sliceSize. Please note that the source code is written in TypeScript.

    public static Base64ToBlob(b64Data, contentType = "", sliceSize = 512): Blob
    {
        const byteCharacters = atob(b64Data);
        const byteArrays = [];

        for (let offset = 0; offset < byteCharacters.length; offset += sliceSize)
        {
            const slice = byteCharacters.slice(offset, offset + sliceSize);
            const byteNumbers = new Array(slice.length);

            for (let i = 0; i < slice.length; i++)
            {
                byteNumbers[i] = slice.charCodeAt(i);
            }

            const byteArray = new Uint8Array(byteNumbers);
            byteArrays.push(byteArray);
        }

        const blob = new Blob(byteArrays, { type: contentType });
        return blob;
    }

Converting blobs to strings and vice versa in Javascript

Answer №1

Similar questions

Trouble accessing setState within an axios call in ReactJs

Error: The function initMap() is not recognized in the Google Maps API

Creating an interactive dropdown feature using AngularJS or Ionic framework

Creating a reverse proxy using next.js

Creating methods in Vue that can alter elements created during the mounted lifecycle hook can be achieved by defining functions

"When the value is false, use the Vue binding to apply a specific

Is there a way to retrieve JSON data using Vue and Axios?

What are some effective techniques to optimize this node.js code and eliminate redundancy?

Upon calling the createModalAddPost() function, a single window is triggered to open

Protractor: Unable to reach variables within closure set in the parent function

Issues with basic emit and listener in socket.io

What benefits does React offer that jQuery does not already provide?

Converting a base64 string to a PNG format for uploading to an S3 bucket from the frontend

Identify a CSS style or attribute that is being dynamically assigned using JavaScript

Adding npm packages to your Vue.js application

Load various types of classes and run functions with matching names

JavaScript: How to identify and select a specific item from a context menu

Cast your vote once for each post within the Angular application

The integration of a side panel with a chrome extension is experiencing issues

The offset value was inconsistent in the desktop version of Firefox