

Differences between API implementations.The Blob interface’s stream() method returns a ReadableStream which upon reading returns the data contained within the blob. You can easily create a ReadableStream from a blob. We can get back ArrayBuffer from a Blob using blob.arrayBuffer(), and then create a view over it for low-level binary processing.Ĭonversion streams are very useful when we need to handle large blob.We can make a Blob from a typed array using new Blob(.) constructor.We can easily convert between Blob and low-level binary data types: Methods that perform web-requests, such as XMLHttpRequest, fetch and so on, can work with Blob natively, as well as with other binary types. That makes Blobs convenient for upload/download operations, that are so common in the browser. While ArrayBuffer, Uint8Array and other BufferSource are “binary data”, a Blob represents “binary data with type”. do something with the data portion we've just read from the blob for each iteration: value is the next blob fragment We can use such urls everywhere, on par with “regular” urls.Ĭonst stream = readableStream.getReader() And what’s more important – we can use this encoding in “data-urls”.Ī data url has the form data. That encoding represents binary data as a string of ultra-safe “readable” characters with ASCII-codes from 0 to 64. Blob to base64Īn alternative to URL.createObjectURL is to convert a Blob into a base64-encoded string. After the revocation, as the mapping is removed, the URL doesn’t work any more.

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. In the last example, we intend the Blob to be used only once, for instant downloading, so we call URL.revokeObjectURL(link.href) immediately. 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. So if we create a URL, that Blob will hang in memory, even if not needed any more. But if an app is long-living, then that doesn’t happen soon. The mapping is automatically cleared on document unload, so Blob objects are freed then. While there’s a mapping for a Blob, the Blob itself resides in the memory. And it allows to reference the Blob in, , basically any other object that expects a URL. So such URLs are short, but allow to access the Blob.Ī generated URL (and hence the link with it) is only valid within the current document, while it’s open. For each URL generated by URL.createObjectURL the browser stores a URL → Blob mapping internally.
