Blob

ArrayBuffer and views are a part of ECMA standard, a part of JavaScript. In the browser, there are additional higher-level objects, described in File API, in particular Blob. Blob consists of an optional string type (a MIME-type usually), plus blobParts – a sequence of other Blob objects, strings and BufferSource. The constructor syntax is: - blobParts is an array of Blob/BufferSource/String values. - options optional object: - type – Blob type, usually MIME-type, e.g. image/png, - endings – whether to transform end-of-line to make the Blob correspond to current OS newlines (

or
). By default “transparent” (do nothing), but also can be “native” (transform). For example: We can extract Blob slices with: - byteStart – the starting byte, by default 0. - byteEnd – the last byte (exclusive, by default till the end). - contentType – the type of the new blob, by default the same as the source. The arguments are similar to array.slice, negative numbers are allowed too.

Blob as URL

A Blob can be easily used as a URL for , or other tags, to show its contents. Thanks to type, we can also download/upload Blob objects, and the type naturally becomes Content-Type in network requests. Let’s start with a simple example. By clicking on a link you download a dynamically-generated Blob with hello world contents as a file: We can also create a link dynamically in JavaScript and simulate a click by link.click(), then download starts automatically. Here’s the similar code that causes user to download the dynamically created Blob, without any HTML: URL.createObjectURL takes a Blob and creates a unique URL for it, in the form blob:/. That’s what the value of link.href looks like: For each URL generated by URL.createObjectURL the browser stores a URL -> Blob mapping internally. So such URLs are short, but allow to access the Blob. A generated URL (and hence the link with it) is only valid within the current document, while it’s open. And it allows to reference the Blob in , , basically any other object that expects a URL. There’s a side effect though. While there’s a mapping for a Blob, the Blob itself resides in the memory. The browser can’t free it. The mapping is automatically cleared on document unload, so Blob objects are freed then. But if an app is long-living, then that doesn’t happen soon. So if we create a URL, that Blob will hang in memory, even if not needed any more. URL.revokeObjectURL(url) removes the reference from the internal mapping, thus allowing the Blob to be deleted (if there are no other references), and the memory to be freed. In the last example, we intend the Blob to be used only once, for instant downloading, so we call URL.revokeObjectURL(link.href) immediately. In the previous example with the clickable HTML-link, we don’t call URL.revokeObjectURL(link.href), because that would make the Blob url invalid. After the revocation, as the mapping is removed, the URL doesn’t work any more.

We can create a Blob of an image, an image part, or even make a page screenshot. That’s handy to upload it somewhere. Image operations are done via element: 1. Draw an image (or its part) on canvas using canvas.drawImage. 2. Call canvas method .toBlob(callback, format, quality) that creates a Blob and runs callback with it when done. In the example below, an image is just copied, but we could cut from it, or transform it on canvas prior to making a blob: If we prefer async/await instead of callbacks: For screenshotting a page, we can use a library such as https://github.com/niklasvh/html2canvas. What it does is just walks the page and draws it on . Then we can get a Blob of it the same way as above.

From Blob to ArrayBuffer

The Blob constructor allows to create a blob from almost anything, including any BufferSource. But if we need to perform low-level processing, we can get the lowest-level ArrayBuffer from blob.arrayBuffer():

From Blob to stream

When we read and write to a blob of more than 2 GB, the use of arrayBuffer becomes more memory intensive for us. At this point, we can directly convert the blob to a stream. A stream is a special object that allows to read from it (or write into it) portion by portion. It’s outside of our scope here, but here’s an example, and you can read more at https://developer.mozilla.org/en-US/docs/Web/API/Streams_API. Streams are convenient for data that is suitable for processing piece-by-piece. The Blob interface’s stream() method returns a ReadableStream which upon reading returns the data contained within the Blob. Then we can read from it, like this:

Summary

While ArrayBuffer, Uint8Array and other BufferSource are “binary data”, a Blob represents “binary data with type”. That makes Blobs convenient for upload/download operations, that are so common in the browser. Methods that perform web-requests, such as XMLHttpRequest, fetch and so on, can work with Blob natively, as well as with other binary types. We can easily convert between Blob and low-level binary data types: - We can make a Blob from a typed array using new Blob(…) constructor. - We can get back ArrayBuffer from a Blob using blob.arrayBuffer(), and then create a view over it for low-level binary processing. Conversion streams are very useful when we need to handle large blob. You can easily create a ReadableStream from a blob. The Blob interface’s stream() method returns a ReadableStream which upon reading returns the data contained within the blob.

// create Blob from a string
let blob = new Blob(["<html>…</html>"], {type: 'text/html'});
// please note: the first argument must be an array [...]