Rectangle 27 68

function dataURItoBlob(dataURI) {
  // convert base64 to raw binary data held in a string
  // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
  var byteString = atob(dataURI.split(',')[1]);

  // separate out the mime component
  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

  // write the bytes of the string to an ArrayBuffer
  var ab = new ArrayBuffer(byteString.length);

  // create a view into the buffer
  var ia = new Uint8Array(ab);

  // set the bytes of the buffer to the correct values
  for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
  }

  // write the ArrayBuffer to a blob, and you're done
  var blob = new Blob([ab], {type: mimeString});
  return blob;

}

Note: According to MDN, BlobBuilder now is deprecated. No idea since when though. (I know this is quite an old question and answer, just keeping it a little up-to-date.) Instead the Blob accepts an array of parts as first parameter of its constructor.

You can replace the BlobBuilder than blob. var blob = new Blob([ab], {type: mimeString}); return blob;

The duplicated split seems a bit wasteful, given that this could be a very large string.

What is the role of the variable "ia" - its assigned a value but is never used in forming the blob. Why?

javascript - Blob from DataURL? - Stack Overflow

javascript fileapi
Rectangle 27 14

dataURItoBlob : function(dataURI, dataTYPE) {
        var binary = atob(dataURI.split(',')[1]), array = [];
        for(var i = 0; i < binary.length; i++) array.push(binary.charCodeAt(i));
        return new Blob([new Uint8Array(array)], {type: dataTYPE});
    }

input dataURI is Data URL and dataTYPE is the file type and then output blob object

The dataTYPE is embedded in dataURI and hence should be parsed as in the first answer.

javascript - Blob from DataURL? - Stack Overflow

javascript fileapi
Rectangle 27 11

Like @Adria method but with Fetch api and just smaller [caniuse?] Don't have to think about mimetype since blob response type just works out of the box

Warning: Can violate the Content Security Policy (CSP) ...if you use that stuff

var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="

fetch(url)
.then(res => res.blob())
.then(blob => console.log(blob))

Don't think you could do it any smaller then this without using lib's

It is supported in edge 14 and safari 10.1

javascript - Blob from DataURL? - Stack Overflow

javascript fileapi
Rectangle 27 10

function dataURLtoBlob( dataUrl, callback )
{
    var req = new XMLHttpRequest;

    req.open( 'GET', dataUrl );
    req.responseType = 'arraybuffer'; // Can't use blob directly because of https://crbug.com/412752

    req.onload = function fileLoaded(e)
    {
        // If you require the blob to have correct mime type
        var mime = this.getResponseHeader('content-type');

        callback( new Blob([this.response], {type:mime}) );
    };

    req.send();
}

dataURLtoBlob( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==', function( blob )
{
    console.log( blob );
});

Will not work in Safari - it will throw cross-origin error if page is loaded from HTTPS.

javascript - Blob from DataURL? - Stack Overflow

javascript fileapi
Rectangle 27 2

function dataURItoBlob(dataURI) {
    if(typeof dataURI !== 'string'){
        throw new Error('Invalid argument: dataURI must be a string');
    }
    dataURI = dataURI.split(',');
    var type = dataURI[0].split(':')[1].split(';')[0],
        byteString = atob(dataURI[1]),
        byteStringLength = byteString.length,
        arrayBuffer = new ArrayBuffer(byteStringLength),
        intArray = new Uint8Array(arrayBuffer);
    for (var i = 0; i < byteStringLength; i++) {
        intArray[i] = byteString.charCodeAt(i);
    }
    return new Blob([intArray], {
        type: type
    });
}

javascript - Blob from DataURL? - Stack Overflow

javascript fileapi
Rectangle 27 24

Use my code to convert between dataURL and blob object in javascript. (better than the code in your link.)

//**dataURL to blob**
function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}

//**blob to dataURL**
function blobToDataURL(blob, callback) {
    var a = new FileReader();
    a.onload = function(e) {callback(e.target.result);}
    a.readAsDataURL(blob);
}

//test:
var blob = dataURLtoBlob('data:text/plain;base64,YWFhYWFhYQ==');
blobToDataURL(blob, function(dataurl){
    console.log(dataurl);
});

I think the thing that was not obvious to me about FileReader is adding the onload event before you call readAsDataURL

HTML5 / Javascript - DataURL to Blob & Blob to DataURL - Stack Overflo...

javascript html5 blob
Rectangle 27 165

Full example of BLOB inline worker:

What if you want to create your worker script on the fly, or create a self-contained page without having to create separate worker files? With Blob(), you can "inline" your worker in the same HTML file as your main logic by creating a URL handle to the worker code as a string

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
</head>
<body>

  <div id="log"></div>

  <script id="worker1" type="javascript/worker">
    // This script won't be parsed by JS engines because its type is javascript/worker.
    self.onmessage = function(e) {
      self.postMessage('msg from worker');
    };
    // Rest of your worker code goes here.
  </script>

  <script>
    function log(msg) {
      // Use a fragment: browser will only render/reflow once.
      var fragment = document.createDocumentFragment();
      fragment.appendChild(document.createTextNode(msg));
      fragment.appendChild(document.createElement('br'));

      document.querySelector("#log").appendChild(fragment);
    }

    var blob = new Blob([
      document.querySelector('#worker1').textContent
    ], { type: "text/javascript" })

    // Note: window.webkitURL.createObjectURL() in Chrome 10+.
    var worker = new Worker(window.URL.createObjectURL(blob));
    worker.onmessage = function(e) {
      log("Received: " + e.data);
    }
    worker.postMessage("hello"); // Start the worker.
  </script>
</body>
</html>
<!DOCTYPE html>
<script id="worker1" type="javascript/worker">
  // This script won't be parsed by JS engines because its type is javascript/worker.
  self.onmessage = function(e) {
    self.postMessage('msg from worker');
  };
  // Rest of your worker code goes here.
</script>
<script>
  var blob = new Blob([
    document.querySelector('#worker1').textContent
  ], { type: "text/javascript" })

  // Note: window.webkitURL.createObjectURL() in Chrome 10+.
  var worker = new Worker(window.URL.createObjectURL(blob));
  worker.onmessage = function(e) {
    console.log("Received: " + e.data);
  }
  worker.postMessage("hello"); // Start the worker.
</script>

@4esn0k - FF6, check my link above for the prefix issue...

BlobBuiler is now deprecated. Use Blob instead. Currently supported in latest Firefox/WebKit/Opera and IE10, see compatibility tables for older browsers.

Blob constructor might be supported in IE10, but you still cannot pass javascript to the web worker through it (not even in IE11): connect.microsoft.com/IE/feedback/details/801810/.

@jayarjo - what about what Feliz said? he shows that there is support for IE10 also

Web workers without a separate Javascript file? - Stack Overflow

javascript web-worker
Rectangle 27 160

Full example of BLOB inline worker:

What if you want to create your worker script on the fly, or create a self-contained page without having to create separate worker files? With Blob(), you can "inline" your worker in the same HTML file as your main logic by creating a URL handle to the worker code as a string

<!DOCTYPE html>
<script id="worker1" type="javascript/worker">
  // This script won't be parsed by JS engines because its type is javascript/worker.
  self.onmessage = function(e) {
    self.postMessage('msg from worker');
  };
  // Rest of your worker code goes here.
</script>
<script>
  var blob = new Blob([
    document.querySelector('#worker1').textContent
  ], { type: "text/javascript" })

  // Note: window.webkitURL.createObjectURL() in Chrome 10+.
  var worker = new Worker(window.URL.createObjectURL(blob));
  worker.onmessage = function(e) {
    console.log("Received: " + e.data);
  }
  worker.postMessage("hello"); // Start the worker.
</script>

@4esn0k - FF6, check my link above for the prefix issue...

BlobBuiler is now deprecated. Use Blob instead. Currently supported in latest Firefox/WebKit/Opera and IE10, see compatibility tables for older browsers.

Blob constructor might be supported in IE10, but you still cannot pass javascript to the web worker through it (not even in IE11): connect.microsoft.com/IE/feedback/details/801810/.

Web workers without a separate Javascript file? - Stack Overflow

javascript web-worker
Rectangle 27 160

Full example of BLOB inline worker:

What if you want to create your worker script on the fly, or create a self-contained page without having to create separate worker files? With Blob(), you can "inline" your worker in the same HTML file as your main logic by creating a URL handle to the worker code as a string

<!DOCTYPE html>
<script id="worker1" type="javascript/worker">
  // This script won't be parsed by JS engines because its type is javascript/worker.
  self.onmessage = function(e) {
    self.postMessage('msg from worker');
  };
  // Rest of your worker code goes here.
</script>
<script>
  var blob = new Blob([
    document.querySelector('#worker1').textContent
  ], { type: "text/javascript" })

  // Note: window.webkitURL.createObjectURL() in Chrome 10+.
  var worker = new Worker(window.URL.createObjectURL(blob));
  worker.onmessage = function(e) {
    console.log("Received: " + e.data);
  }
  worker.postMessage("hello"); // Start the worker.
</script>

@4esn0k - FF6, check my link above for the prefix issue...

BlobBuiler is now deprecated. Use Blob instead. Currently supported in latest Firefox/WebKit/Opera and IE10, see compatibility tables for older browsers.

Blob constructor might be supported in IE10, but you still cannot pass javascript to the web worker through it (not even in IE11): connect.microsoft.com/IE/feedback/details/801810/.

Web workers without a separate Javascript file? - Stack Overflow

javascript web-worker
Rectangle 27 1

Nevermind, it ended up working after sticking to the instructions in this thread Display image from blob using javascript and websockets and making my server forward raw (yet) unmodified BinaryWebSocketFrames.

Now I'm still fighting bad performance of the canvas (<1fp) but that might become subject of a new thread.

HTML5 / Javascript - DataURL to Blob & Blob to DataURL - Stack Overflo...

javascript html5 blob
Rectangle 27 39

function base64toBlob(base64Data, contentType) {
    contentType = contentType || '';
    var sliceSize = 1024;
    var byteCharacters = atob(base64Data);
    var bytesLength = byteCharacters.length;
    var slicesCount = Math.ceil(bytesLength / sliceSize);
    var byteArrays = new Array(slicesCount);

    for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
        var begin = sliceIndex * sliceSize;
        var end = Math.min(begin + sliceSize, bytesLength);

        var bytes = new Array(end - begin);
        for (var offset = begin, i = 0 ; offset < end; ++i, ++offset) {
            bytes[i] = byteCharacters[offset].charCodeAt(0);
        }
        byteArrays[sliceIndex] = new Uint8Array(bytes);
    }
    return new Blob(byteArrays, { type: contentType });
}

Is there any reason for slicing the bytes into blobs? If I don't use, is there any disadvantage or risk?

Works great on Android with Ionic 1 / Angular 1. Slice is required otherwise I run into OOM (Android 6.0.1).

Creating a Blob from a base64 string in JavaScript - Stack Overflow

javascript base64
Rectangle 27 36

function base64toBlob(base64Data, contentType) {
    contentType = contentType || '';
    var sliceSize = 1024;
    var byteCharacters = atob(base64Data);
    var bytesLength = byteCharacters.length;
    var slicesCount = Math.ceil(bytesLength / sliceSize);
    var byteArrays = new Array(slicesCount);

    for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
        var begin = sliceIndex * sliceSize;
        var end = Math.min(begin + sliceSize, bytesLength);

        var bytes = new Array(end - begin);
        for (var offset = begin, i = 0 ; offset < end; ++i, ++offset) {
            bytes[i] = byteCharacters[offset].charCodeAt(0);
        }
        byteArrays[sliceIndex] = new Uint8Array(bytes);
    }
    return new Blob(byteArrays, { type: contentType });
}

Is there any reason for slicing the bytes into blobs? If I don't use, is there any disadvantage or risk?

Works great on Android with Ionic 1 / Angular 1. Slice is required otherwise I run into OOM (Android 6.0.1).

Creating a Blob from a base64 string in JavaScript - Stack Overflow

javascript base64
Rectangle 27 36

function base64toBlob(base64Data, contentType) {
    contentType = contentType || '';
    var sliceSize = 1024;
    var byteCharacters = atob(base64Data);
    var bytesLength = byteCharacters.length;
    var slicesCount = Math.ceil(bytesLength / sliceSize);
    var byteArrays = new Array(slicesCount);

    for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
        var begin = sliceIndex * sliceSize;
        var end = Math.min(begin + sliceSize, bytesLength);

        var bytes = new Array(end - begin);
        for (var offset = begin, i = 0 ; offset < end; ++i, ++offset) {
            bytes[i] = byteCharacters[offset].charCodeAt(0);
        }
        byteArrays[sliceIndex] = new Uint8Array(bytes);
    }
    return new Blob(byteArrays, { type: contentType });
}

Is there any reason for slicing the bytes into blobs? If I don't use, is there any disadvantage or risk?

Works great on Android with Ionic 1 / Angular 1. Slice is required otherwise I run into OOM (Android 6.0.1).

Creating a Blob from a base64 string in JavaScript - Stack Overflow

javascript base64
Rectangle 27 7

function b64toBlob(b64Data, contentType, sliceSize) {
  contentType = contentType || '';
  sliceSize = sliceSize || 512;

  var byteCharacters = atob(b64Data);
  var byteArrays = [];

  for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    var slice = byteCharacters.slice(offset, offset + sliceSize);

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

    var byteArray = new Uint8Array(byteNumbers);

    byteArrays.push(byteArray);
  }
    
  var blob = new Blob(byteArrays, {type: contentType});
  return blob;
}


var contentType = 'image/png';
var b64Data = Your Base64 encode;

var blob = b64toBlob(b64Data, contentType);
var blobUrl = URL.createObjectURL(blob);

var img = document.createElement('img');
img.src = blobUrl;
document.body.appendChild(img);

It'[s working perfectly in all devices. but m using this in cross platform application and it's not working in lower version of Android OS like 4.4 any solution for this?

@Alejandro Guevara. Really nice. This is hugely helpful to anyone who runs an API and sometimes need to present a file for download. Thx.

Creating a Blob from a base64 string in JavaScript - Stack Overflow

javascript base64
Rectangle 27 7

function b64toBlob(b64Data, contentType, sliceSize) {
  contentType = contentType || '';
  sliceSize = sliceSize || 512;

  var byteCharacters = atob(b64Data);
  var byteArrays = [];

  for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    var slice = byteCharacters.slice(offset, offset + sliceSize);

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

    var byteArray = new Uint8Array(byteNumbers);

    byteArrays.push(byteArray);
  }
    
  var blob = new Blob(byteArrays, {type: contentType});
  return blob;
}


var contentType = 'image/png';
var b64Data = Your Base64 encode;

var blob = b64toBlob(b64Data, contentType);
var blobUrl = URL.createObjectURL(blob);

var img = document.createElement('img');
img.src = blobUrl;
document.body.appendChild(img);

It'[s working perfectly in all devices. but m using this in cross platform application and it's not working in lower version of Android OS like 4.4 any solution for this?

@Alejandro Guevara. Really nice. This is hugely helpful to anyone who runs an API and sometimes need to present a file for download. Thx.

Creating a Blob from a base64 string in JavaScript - Stack Overflow

javascript base64
Rectangle 27 7

function b64toBlob(b64Data, contentType, sliceSize) {
  contentType = contentType || '';
  sliceSize = sliceSize || 512;

  var byteCharacters = atob(b64Data);
  var byteArrays = [];

  for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    var slice = byteCharacters.slice(offset, offset + sliceSize);

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

    var byteArray = new Uint8Array(byteNumbers);

    byteArrays.push(byteArray);
  }
    
  var blob = new Blob(byteArrays, {type: contentType});
  return blob;
}


var contentType = 'image/png';
var b64Data = Your Base64 encode;

var blob = b64toBlob(b64Data, contentType);
var blobUrl = URL.createObjectURL(blob);

var img = document.createElement('img');
img.src = blobUrl;
document.body.appendChild(img);

It'[s working perfectly in all devices. but m using this in cross platform application and it's not working in lower version of Android OS like 4.4 any solution for this?

@Alejandro Guevara. Really nice. This is hugely helpful to anyone who runs an API and sometimes need to present a file for download. Thx.

Creating a Blob from a base64 string in JavaScript - Stack Overflow

javascript base64
Rectangle 27 22

Creating a Pseudo-Classical Inheritance Pattern in JavaScript

If you want something similar to classes in JavaScript then there are a lot of libraries out there which provide it to you. For example using augment you could restructure your code as follows:

var augment = require("augment");

var ABC = augment(Object, function () {
    this.constructor = function (key, value) {
        this.key = key;
        this.value = value;
    };

    this.what = function () {
        alert("what");
    };
});

var XYZ = augment(ABC, function (base) {
    this.constructor = function (key, value) {
        base.constructor.call(this, key, value);
    };

    this.that = function () {
        alert("that");
    };
});

I don't know about you but to me this looks a lot like classical inheritance in C++ or Java. If this solves your problem, great! If is doesn't then continue reading.

In a lot of ways prototypes are similar to classes. In fact prototypes and classes are so similar that we can use prototypes to model classes. First let's take a look at how prototypal inheritance really works:

The above picture was taken from the following answer. I suggest you read it carefully. The diagram shows us:

  • Every constructor has a property called prototype which points to the prototype object of the constructor function.
  • Every prototype has a property called constructor which points to the constructor function of the prototype object.
  • We create an instance from a constructor function. However the instance actually inherits from the prototype, not the constructor.

This is very useful information. Traditionally we've always created a constructor function first and then we've set its prototype properties. However this information shows us that we may create a prototype object first and then define the constructor property on it instead.

function ABC(key, value) {
    this.key = key;
    this.value = value;
}

ABC.prototype.what = function() {
    alert("what");
};

However using our newfound knowledge we may write the same thing as:

var ABC = CLASS({
    constructor: function (key, value) {
        this.key = key;
        this.value = value;
    },
    what: function () {
        alert("what");
    }
});

function CLASS(prototype) {
    var constructor = prototype.constructor;
    constructor.prototype = prototype;
    return constructor;
}

As you can see encapsulation is easy to achieve in JavaScript. All you need to do is think sideways. Inheritance however is a different issue. You need to do a little more work to achieve inheritance.

augment
function augment(body) {
    var base = typeof this === "function" ? this.prototype : this;
    var prototype = Object.create(base);
    body.apply(prototype, arrayFrom(arguments, 1).concat(base));
    if (!ownPropertyOf(prototype, "constructor")) return prototype;
    var constructor = prototype.constructor;
    constructor.prototype = prototype;
    return constructor;
}

Notice that the last three lines are the same as that of CLASS from the previous section:

function CLASS(prototype) {
    var constructor = prototype.constructor;
    constructor.prototype = prototype;
    return constructor;
}

This tells us that once we have a prototype object all we need to do is get its constructor property and return it.

The first three lines of augment are used to:

  • Get the base class prototype.
  • Create a derived class prototype using Object.create.
  • Populate the derived class prototype with the specified properties.

That's all that there is to inheritance in JavaScript. If you want to create your own classical inheritance pattern then you should be thinking along the same lines.

Every JavaScript programmer worth their salt will tell you that prototypal inheritance is better than classical inheritance. Nevertheless newbies who come from a language with classical inheritance always try to implement classical inheritance on top of prototypal inheritance, and they usually fail.

They fail not because it's not possible to implement classical inheritance on top of prototypal inheritance but because to implement classical inheritance on top of prototypal inheritance you first need to understand how true prototypal inheritance works.

However once you understand true prototypal inheritance you'll never want to go back to classical inheritance. I too tried to implement classical inheritance on top of prototypal inheritance as a newbie. Now that I understand how true prototypal inheritance works however I write code like this:

function extend(self, body) {
    var base = typeof self === "function" ? self.prototype : self;
    var prototype = Object.create(base, {new: {value: create}});
    return body.call(prototype, base), prototype;

    function create() {
        var self = Object.create(prototype);
        return prototype.hasOwnProperty("constructor") &&
            prototype.constructor.apply(self, arguments), self;
    }
}

The above extend function is very similar to augment. However instead of returning the constructor function it returns the prototype object. This is actually a very neat trick which allows static properties to be inherited. You can create a class using extend as follows:

var Abc = extend(Object, function () {
    this.constructor = function (key, value) {
        this.value = 333 + Number(value);
        this.key = key;
    };

    this.what = function () {
        alert("what");
    };
});

Inheritance is just as simple:

Remember however that extend does not return the constructor function. It returns the prototype object. This means that you can't use the new keyword to create an instance of the class. Instead you need to use new as a method, as follows:

var x = Xyz.new("x", "123");
var y = Xyz.new("y", "456");
var it = Abc.new("it", "789");

This is actually a good thing. The new keyword is considered harmful and I strongly recommend you to stop using it. For example it's not possible to use apply with the new keyword. However it is possible to use apply with the new method as follows:

var it = Abc.new.apply(null, ["it", "789"]);

Since Abc and Xyz are not constructor functions we can't use instanceof to test whether an object is an instance of Abc or Xyz. However that's not a problem because JavaScript has a method called isPrototypeOf which tests whether an object is a prototype of another object:

alert(x.key + ": " + x.value + "; isAbc: " + Abc.isPrototypeOf(x));
alert(y.key + ": " + y.value + "; isAbc: " + Abc.isPrototypeOf(y));

alert(it.key + ": " + it.value + "; isAbc: " + Abc.isPrototypeOf(it));
alert(it.key + ": " + it.value + "; isXyz: " + Xyz.isPrototypeOf(it));
isPrototypeOf
instanceof
alert(Abc.isPrototypeOf(Xyz)); // true

Besides this minor change everything else works just like it did before:

x.what();
y.that();

it.what();
it.that(); // will throw; it is not Xyz and does not have that method

What else does true prototypal inheritance offer? One of the biggest advantages of true prototypal inheritance is that there's no distinction between normal properties and static properties allowing you to write code like this:

var Xyz = extend(Abc, function (base) {
    this.empty = this.new();

    this.constructor = function (key, value) {
        base.constructor.call(this, key, value);
    };

    this.that = function () {
        alert("that");
    };
});

Notice that we can create instances of the class from within the class itself by calling this.new. If this.constructor is not yet defined then it returns a new uninitialized instance. Otherwise it returns a new initialized instance.

In addition because Xyz is the prototype object we can access Xyz.empty directly (i.e. empty is a static property of Xyz). This also means that static properties are automatically inherited and are no different from normal properties.

Finally, because the class is accessible from within the class definition as this, you can created nested classes which inherit from the class which they are nested within by using extend as follows:

var ClassA = extend(Object, function () {
    var ClassB = extend(this, function () {
        // class definition
    });

    // rest of the class definition

    alert(this.isPrototypeOf(ClassB)); // true
});

There's a known issue that the properties like instance.What in fact are not inherited from the prototype and each instance has its own property, which can be solved by adding an argument and passing the prototype to the initialize function such as function (instance, prototype, _super); but that approach doesn't work with a closure captures the arguments of the constructor. I'm still reading your answer, and sorry for giving you migraines ..

augment seems a good solution but I'm wondering how to declare an instance of type which is being declared, such as declaring Xyz.Empty=new Xyz(); inside while Xyz is not yet declared, using this.constructor to do that may reduce the readability ..

Another problem with augment that I cannot see a solution is to declare nesting classes which derive from the declaring class.

extend

@AaditMShah: Thanks for the update, but I cannot upvote twice :-). However, I don't really like your static properties, which are just prototype properties (and accessing them on the instances might trap some people into trying to assign them on the instances). I had more thought of something like in this answer of mine where there are two separate (cross-linked) prototype chains for the Class objects and the instances.

javascript - How to achieve pseudo-classical inheritance right on the ...

javascript inheritance types prototype
Rectangle 27 2

const downloadBlobAsFile = (function closure_shell() {
    const a = document.createElement("a");
    return function downloadBlobAsFile(blob, filename) {
        const object_URL = URL.createObjectURL(blob);
        a.href = object_URL;
        a.download = filename;
        a.click();
        URL.revokeObjectURL(object_URL);
    };
})();


document.getElementById("theButton").addEventListener("click", _ => {
    downloadBlobAsFile(new Blob(
        [document.getElementById("ticketlog").value],
        {type: "text/plain"}
    ), "result.txt");
});
download
<a>

the name of the file to download

Blob
Blob(array, options)

This should be accepted as the answer. Also the a.click() won't work unless you document.appendElement first. At least in Firefox 53.

The desired type is also presumably text/plain...

html5 - Creating Javascript Blob() with data from HTML Element. Then d...

javascript html5 text blob
Rectangle 27 117

2015 update - The ServiceWorker singularity arrives

The html5rocks solution of embedding the web worker code in HTML is fairly horrible. And a blob of escaped JavaScript-as-a-string is no better, not least because it complicates work-flow (Closure compiler can't operate on strings).

Personally I really like the toString methods, but @dan-man THAT regex!

// Build a worker from an anonymous function body
var blobURL = URL.createObjectURL( new Blob([ '(',

function(){
    //Long-running work here
}.toString(),

')()' ], { type: 'application/javascript' } ) ),

worker = new Worker( blobURL );

// Won't be needing this anymore
URL.revokeObjectURL( blobURL );

Support is the intersection of these three tables:

This won't work for a SharedWorker however, because the URL must be an exact match, even if the optional 'name' parameter matches. For a SharedWorker, you'll need a separate JavaScript file.

Now there's an even more powerful way of solving this problem. Again, store the worker code as a function, (rather than a static string) and convert using .toString(), then insert the code into CacheStorage under a static URL of your choice.

// Post code from window to ServiceWorker...
navigator.serviceWorker.controller.postMessage(
 [ '/my_workers/worker1.js', '(' + workerFunction1.toString() + ')()' ]
);

// Insert via ServiceWorker.onmessage. Or directly once window.caches is exposed
caches.open( 'myCache' ).then( function( cache )
{
 cache.put( '/my_workers/worker1.js',
  new Response( workerScript, { headers: {'content-type':'application/javascript'}})
 );
});

Can you elaborate on this solution, how does it work? What is the worker1.js? Is it a seperate js file? I am trying to use this but unable to make it work. Specifically I am trying to make it work for a SharedWorker

If only you could wrap it up in a useful function!

Web workers without a separate Javascript file? - Stack Overflow

javascript web-worker
Rectangle 27 115

2015 update - The ServiceWorker singularity arrives

The html5rocks solution of embedding the web worker code in HTML is fairly horrible. And a blob of escaped JavaScript-as-a-string is no better, not least because it complicates work-flow (Closure compiler can't operate on strings).

Personally I really like the toString methods, but @dan-man THAT regex!

// Build a worker from an anonymous function body
var blobURL = URL.createObjectURL( new Blob([ '(',

function(){
    //Long-running work here
}.toString(),

')()' ], { type: 'application/javascript' } ) ),

worker = new Worker( blobURL );

// Won't be needing this anymore
URL.revokeObjectURL( blobURL );

Support is the intersection of these three tables:

This won't work for a SharedWorker however, because the URL must be an exact match, even if the optional 'name' parameter matches. For a SharedWorker, you'll need a separate JavaScript file.

Now there's an even more powerful way of solving this problem. Again, store the worker code as a function, (rather than a static string) and convert using .toString(), then insert the code into CacheStorage under a static URL of your choice.

// Post code from window to ServiceWorker...
navigator.serviceWorker.controller.postMessage(
 [ '/my_workers/worker1.js', '(' + workerFunction1.toString() + ')()' ]
);

// Insert via ServiceWorker.onmessage. Or directly once window.caches is exposed
caches.open( 'myCache' ).then( function( cache )
{
 cache.put( '/my_workers/worker1.js',
  new Response( workerScript, { headers: {'content-type':'application/javascript'}})
 );
});

Can you elaborate on this solution, how does it work? What is the worker1.js? Is it a seperate js file? I am trying to use this but unable to make it work. Specifically I am trying to make it work for a SharedWorker

If only you could wrap it up in a useful function!

Web workers without a separate Javascript file? - Stack Overflow

javascript web-worker