You can do this in two ways:
For method one and since you're already using promises, you can do:
Then get the image as Blob using it like this:
The other method will require a canvas:
In the browser, there are additional higher-level objects, described in File API, in particular
The constructor syntax is:
We can extract
The arguments are similar to
We can’t change data directly in a
Blob as URL
A Blob can be easily used as a URL for
Let’s start with a simple example. By clicking on a link you download a dynamically-generated
Here’s the similar code that causes user to download the dynamically created
That’s what the value of
For each URL generated by
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
There’s a side effect though. While there’s a mapping
The mapping is automatically cleared on document unload, so
So if we create a URL, that
In the last example, we intend the
In the previous example with the clickable HTML-link, we don’t call
Blob to base64
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 has the form
For instance, here’s a smiley:
The browser will decode the string and show the image:
To transform a
Here’s the demo of downloading a blob, now via base-64:
Both ways of making a URL of a
Blob to data url
Image to blob
We can create a
Image operations are done via
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
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
From Blob to ArrayBuffer
But if we need to perform low-level processing, we can get the lowest-level
From Blob to stream
When we read and write to a blob of more than
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.
Then we can read from it, like this:
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
We can easily convert between
Conversion streams are very useful when we need to handle large blob. You can easily create a
How do you Blob in image tag?
You can convert your string into a Uint8Array to get the raw data. Then create a Blob for that data and pass to URL. createObjectURL(blob) to convert the Blob into a URL that you pass to img.
How do I get a Blob URL?
Right-click on the webpage and click “Inspect” in the menu. When the DevTools panel opens, click on the three vertical dots in the top-right corner and select “Undock into a separate window.” Press Ctrl + F on Windows or Cmd + F on Mac devices to find the blob URL. Enter “ blob:HTTP ” to find the link for the video.
What does Blob mean in URL?
Published Apr 27 2019 , Last Updated May 28 2019. Web Browsers implement a Blob object, which is responsible for holding data. Blob means “Binary Large Object” and it's an opaque representation of a chunk of bytes. Blobs are used for many things. They can be created from content from the network.