# 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](https://www.w3.org/TR/FileAPI/), in particular `Blob`.
`Blob` consists of an optional string `type` (a MIME-type usually), plus `blobParts` -- a sequence of other `Blob` objects, strings and `BufferSources`.
The constructor syntax is:
```js
new Blob(blobParts, options);
```
- **`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 (`\r\n` or `\n`). By default `"transparent"` (do nothing), but also can be `"native"` (transform).
For example:
```js
// create Blob from a string
let blob = new Blob(["…"], {type: 'text/html'});
// please note: the first argument must be an array [...]
```
```js
// create Blob from a typed array and strings
let hello = new Uint8Array([72, 101, 108, 108, 111]); // "hello" in binary form
let blob = new Blob([hello, ' ', 'world'], {type: 'text/plain'});
```
We can extract blob slices with:
```js
blob.slice([byteStart], [byteEnd], [contentType]);
```
- **`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.
```smart header="Blobs are immutable"
We can't change data directly in a blob, but we can slice parts of blobs, create new blobs from them, mix them into a new blob and so on.
This behavior is similar to JavaScript strings: we can't change a character in a string, but we can make a new corrected string.
```
## Blob as URL
A Blob can be easily used as an URL for ``, `![]()
` or other tags, to show its contents.
Thanks to `type`, we can allso download/upload blobs, and it 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:
```html run
Download
```
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 dynamicallly created Blob, without any HTML:
```js run
let link = document.createElement('a');
link.download = 'hello.txt';
let blob = new Blob(['Hello, world!'], {type: 'text/plain'});
link.href = URL.createObjectURL(blob);
link.click();
URL.revokeObjectURL(link.href);
```
`URL.createObjectURL` takes a blob and creates an unique URL for it, in the form `blob:/`.
That's what the value of `link.href` looks like:
```
blob:https://javascript.info/1e67e00e-860d-40a5-89ae-6ab0cbee6273
```
The browser for each url generated by `URL.createObjectURL` stores an the 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 an url.
There's a side-effect though. While there's an 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 blobs are freed then. But if an app is long-living, then that doesn't happen soon.
**So if we create an 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 though, 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.
## Blob to base64
An alternative to `URL.createObjectURL` is to convert a blob into a base64-encoded string.
That encoding represents binary data as a string of ultra-safe "readable" characters with ASCII-codes from 0 to 64. And what's more important -- we can use this encoding in "data-urls".
A [data url](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) has the form `data:[][;base64],`. We can use such urls everywhere, on a par with "regular" urls.
For instance, here's a smiley:
```html
```
The browser will decode the string and show the image:
To transform a blob into base64, we'll use the built-in `FileReader` object. It can read data from Blobs in multiple formats. In the [next chapter](info:file) we'll cover it more in-depth.
Here's the demo of downloading a blob, now via base-64:
```js run
let link = document.createElement('a');
link.download = 'hello.txt';
let blob = new Blob(['Hello, world!'], {type: 'text/plain'});
*!*
let reader = new FileReader();
reader.readAsDataURL(blob); // converts the blob to base64 and calls onload
*/!*
reader.onload = function() {
link.href = reader.result; // data url
link.click();
};
```
Both ways of making an URL of a blob are usable. But usually `URL.createObjectURL(blob)` is simpler and faster.
```compare title-plus="URL.createObjectURL(blob)" title-minus="Blob to data url"
+ We need to revoke them if care about memory.
+ Direct access to blob, no "encoding/decoding"
- No need to revoke anything.
- Performance and memory losses on big blobs for encoding.
```
## Image to blob
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 `