JavaScript tutorial

Blob

The Blob object represents a blob, which is a file-like object of immutable, raw data.

Blobs can represent data that isn't necessarily in a JavaScript-native format. The File class is based on Blob, so you can use File anywhere you can use Blob.

// create blob with json data
const obj = {hello: 'world'};
const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'});

blob to data URL

function blobToDataURL(blob, cb) {
    var a = new FileReader();
    a.onload = function(e) {cb(e.target.result);}
    a.readAsDataURL(blob);
}

blobToDataURL(myBlob, 
    dataUrl => console.log("dataUrl: ", dataUrl));// with promise
function  blobToDataURL2(blob) {
  return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onloadend = () => resolve(reader.result);
      reader.onerror = reject;
      reader.readAsDataURL(blob);
   });
}

// out:
// data:application/json;base64,ewogICJoZWxsbyI6ICJ3b3JsZCIKfQ==
blobToDataURL2(myBlob)
    .then(dataUrl => console.log("dataUrl: ", dataUrl));

The URL.createObjectURL() method also converts a blob to a data URL. There are some differences from FileReader:

unlike FileReader, it is executed synchronously.
result of createObjectURL is stored in memory until the document is unloaded (e.g. the document is closed) or until the URL.revokeObjectURL() method is called. With FileReader result will be removed by the garbage collector.
FileReader generates base64 encoded data, and createObjectURL generates a string that you can use as the value of the src or href attributes on your page.

var myBlob =  new Blob([JSON.stringify({hello: "world"}, null, 2)], {type : 'application/json'});

 var urlData=URL.createObjectURL(myBlob);

// out:
// blob:https://socode4.com/5e9849bd-3206-4a4c-b3e8-64b83235b531
console.log("create dataUrl", urlData);
// uncomment if necessary
// URL.revokeObjectURL(myBlob);

data URL to blob

function dataURLtoBlob(dataUrl) {
    var arr = dataUrl.split(','); 
    var mimetype = arr[0].match(/:(.*?);/)[1];
    var bstr = atob(arr[1]);
    var blobData = new Uint8Array(n);
    
    var i = bstr.length;
    while(i--){
        blobData[i] = bstr.charCodeAt(i);
    }
    return new Blob([blobData], {type:mimetype});
}

Previous

Next