Playground for blob-util
Welcome to the docs and playground for blob-util
!
Below you'll find API documentation, as well as a little Kirby GIF you can play around with.
Here's some code to get you started. Copy-paste this into your console:
var img = document.getElementById('kirby');
blobUtil.imgSrcToBlob(img.src).then(function (blob) {
var blobURL = blobUtil.createObjectURL(blob);
var newImg = document.createElement('img');
newImg.src = blobURL;
img.parentNode.appendChild(newImg);
});
If you see two Kirbys, you're on your way!
Methods
arrayBufferToBlob(buffer, type) → {Promise}
Convert an
ArrayBuffer
to a Blob
. Returns a Promise.
Parameters:
Name | Type | Description |
---|---|---|
buffer |
ArrayBuffer | |
type |
string | undefined | the content type (optional) |
Returns:
Promise that resolves with the
Blob
- Type
- Promise
base64StringToBlob(base64, type) → {Promise}
Convert a base64-encoded string to a
Blob
. Returns a Promise.
Parameters:
Name | Type | Description |
---|---|---|
base64 |
string | |
type |
string | undefined | the content type (optional) |
Returns:
Promise that resolves with the
Blob
- Type
- Promise
binaryStringToBlob(binary, type) → {Promise}
Convert a binary string to a
Blob
. Returns a Promise.
Parameters:
Name | Type | Description |
---|---|---|
binary |
string | |
type |
string | undefined | the content type (optional) |
Returns:
Promise that resolves with the
Blob
- Type
- Promise
blobToArrayBuffer(blob) → {Promise}
Convert a
Blob
to an ArrayBuffer
. Returns a Promise.
Parameters:
Name | Type | Description |
---|---|---|
blob |
Blob |
Returns:
Promise that resolves with the
ArrayBuffer
- Type
- Promise
blobToBase64String(blob) → {Promise}
Convert a
Blob
to a binary string. Returns a Promise.
Parameters:
Name | Type | Description |
---|---|---|
blob |
Blob |
Returns:
Promise that resolves with the binary string
- Type
- Promise
blobToBinaryString(blob) → {Promise}
Convert a
Blob
to a binary string. Returns a Promise.
Parameters:
Name | Type | Description |
---|---|---|
blob |
Blob |
Returns:
Promise that resolves with the binary string
- Type
- Promise
canvasToBlob(canvas, type, quality) → {Promise}
Convert a
canvas
to a Blob
. Returns a Promise.
Parameters:
Name | Type | Description |
---|---|---|
canvas |
string | |
type |
string | undefined | the content type (optional, defaults to 'image/png') |
quality |
number | undefined | a number between 0 and 1 indicating image quality if the requested type is 'image/jpeg' or 'image/webp' |
Returns:
Promise that resolves with the
Blob
- Type
- Promise
createBlob(parts, options) → {Blob}
Shim for
new Blob()
to support
older browsers that use the deprecated
BlobBuilder
API.
Parameters:
Name | Type | Description |
---|---|---|
parts |
Array | content of the Blob |
options |
Object | usually just {type: myContentType} |
Returns:
- Type
- Blob
createObjectURL(blob) → {string}
Shim for
URL.createObjectURL()
to support browsers that only have the prefixed
webkitURL
(e.g. Android <4.4).
Parameters:
Name | Type | Description |
---|---|---|
blob |
Blob |
Returns:
url
- Type
- string
dataURLToBlob(dataURL) → {Promise}
Convert a data URL string
(e.g.
'data:image/png;base64,iVBORw0KG...'
)
to a Blob
. Returns a Promise.
Parameters:
Name | Type | Description |
---|---|---|
dataURL |
string |
Returns:
Promise that resolves with the
Blob
- Type
- Promise
imgSrcToBlob(src, type, crossOrigin, quality) → {Promise}
Convert an image's
src
URL to a Blob
by loading the image and painting
it to a canvas
. Returns a Promise.
Note: this will coerce the image to the desired content type, and it
will only paint the first frame of an animated GIF.
Parameters:
Name | Type | Description |
---|---|---|
src |
string | |
type |
string | undefined | the content type (optional, defaults to 'image/png') |
crossOrigin |
string | undefined | for CORS-enabled images, set this to 'Anonymous' to avoid "tainted canvas" errors |
quality |
number | undefined | a number between 0 and 1 indicating image quality if the requested type is 'image/jpeg' or 'image/webp' |
Returns:
Promise that resolves with the
Blob
- Type
- Promise
imgSrcToDataURL(src, type, crossOrigin, quality) → {Promise}
Convert an image's
src
URL to a data URL by loading the image and painting
it to a canvas
. Returns a Promise.
Note: this will coerce the image to the desired content type, and it
will only paint the first frame of an animated GIF.
Parameters:
Name | Type | Description |
---|---|---|
src |
string | |
type |
string | undefined | the content type (optional, defaults to 'image/png') |
crossOrigin |
string | undefined | for CORS-enabled images, set this to 'Anonymous' to avoid "tainted canvas" errors |
quality |
number | undefined | a number between 0 and 1 indicating image quality if the requested type is 'image/jpeg' or 'image/webp' |
Returns:
Promise that resolves with the data URL string
- Type
- Promise
revokeObjectURL(url)
Shim for
URL.revokeObjectURL()
to support browsers that only have the prefixed
webkitURL
(e.g. Android <4.4).
Parameters:
Name | Type | Description |
---|---|---|
url |
string |