W3cubDocs

/DOM

Body.blob

The blob() method of the Body mixin takes a Response stream and reads it to completion. It returns a promise that resolves with a Blob.

Syntax

response.blob().then(function(myBlob) {
  // do something with myBlob
});

Parameters

None.

Note: If the Response has a Response.type of "opaque", the resulting Blob will have a Blob.size of 0 and a Blob.type of empty string "", which renders it useless for methods like URL.createObjectURL.

Returns

A promise that resolves with a Blob.

Example

In our fetch request example (run fetch request live), we create a new request using the Request.Request constructor, then use it to fetch a JPG. When the fetch is successful, we read a Blob out of the response using blob(), put it into an object URL using URL.createObjectURL, and then set that URL as the source of an <img> element to display the image.

var myImage = document.querySelector('img');

var myRequest = new Request('flowers.jpg');

fetch(myRequest)
.then(function(response) {
  return response.blob();
})
.then(function(myBlob) {
  var objectURL = URL.createObjectURL(myBlob);
  myImage.src = objectURL;
});

Specifications

Specification Status Comment
Fetch
The definition of 'blob()' in that specification.
Living Standard

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 42
42
41
Disabled
Disabled From version 41: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Yes 39
39
34
Disabled
Disabled From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
No 29
29
28
Disabled
Disabled From version 28: this feature is behind the Experimental Web Platform Features preference.
No
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support No No Yes No No No No

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Body/blob