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

Validate form for radio group

Implementing route navigation in two components using a click button

What is the best way to transfer values dynamically with C# code in jQuery?

Enhancing ASP.NET MVC 5 Application with jQuery Validate: Implementing Submit Button Click Events

When rendering, DirectionsRenderer replaces the Marker

Getting a result from a Node.js function that includes a database query

Are there any situations in which subscribing to an RXJS Observable does not result in either a success or error response

Issue occurring while trying to select an item from the dynamically generated options using AJAX

Implementing setTimeout with the copy button: A guide

creating an animated loop within an Angular template

Using jQuery to store the selection made in a select element option

D3.js is providing inaccurate tick numbers

Adjusting the display of HTML elements depending on geolocation authorization

Embedding Google+ Sharing in an iframe

Issue with Orgchart JS: The requested resource does not have the 'Access-Control-Allow-Origin' header present

An efficient JavaScript regular expression pattern that allows for both alphanumeric and special characters

Encountering an issue while executing grunt-contrib-imagemin

What are the steps to ensure the equalizer start button functions properly?

Error in Node application: Cannot search for 'x' in 'y' using the 'in' operator with Express and Nunjucks

What is the best way to fetch information from an API using Angular5 with Material2 components?