blob-util

Convert an ArrayBuffer to a binary string.

Example:

var myString = blobUtil.arrayBufferToBinaryString(arrayBuff)

Parameter buffer

array buffer

Returns

binary string

Convert an ArrayBuffer to a Blob.

Example:

var blob = blobUtil.arrayBufferToBlob(arrayBuff, 'audio/mpeg');

Parameter buffer

Parameter type

the content type (optional)

Returns

Blob

Convert a base64-encoded string to a Blob.

Example:

var blob = blobUtil.base64StringToBlob(base64String);

Parameter base64

base64-encoded string

Parameter type

the content type (optional)

Returns

Blob

Convert a binary string to an ArrayBuffer.

var myBuffer = blobUtil.binaryStringToArrayBuffer(binaryString)

Parameter binary

binary string

Returns

array buffer

Convert a binary string to a Blob.

Example:

var blob = blobUtil.binaryStringToBlob(binaryString);

Parameter binary

binary string

Parameter type

the content type (optional)

Returns

Blob

Convert a Blob to an ArrayBuffer.

Example:

blobUtil.blobToArrayBuffer(blob).then(function (arrayBuff) {
  // success
}).catch(function (err) {
  // error
});

Parameter blob

Returns

Promise that resolves with the ArrayBuffer

Convert a Blob to a binary string.

Example:

blobUtil.blobToBase64String(blob).then(function (base64String) {
  // success
}).catch(function (err) {
  // error
});

Parameter blob

Returns

Promise that resolves with the binary string

Convert a Blob to a binary string.

Example:

blobUtil.blobToBinaryString(blob).then(function (binaryString) {
  // success
}).catch(function (err) {
  // error
});

Parameter blob

Returns

Promise that resolves with the binary string

Convert a Blob to a data URL string (e.g. 'data:image/png;base64,iVBORw0KG...').

Example:

var dataURL = blobUtil.blobToDataURL(blob);

Parameter blob

Returns

Promise that resolves with the data URL string

Convert a canvas to a Blob.

Examples:

blobUtil.canvasToBlob(canvas).then(function (blob) {
  // success
}).catch(function (err) {
  // error
});

Most browsers support converting a canvas to both 'image/png' and 'image/jpeg'. You may also want to try 'image/webp', which will work in some browsers like Chrome (and in other browsers, will just fall back to 'image/png'):

blobUtil.canvasToBlob(canvas, 'image/webp').then(function (blob) {
  // success
}).catch(function (err) {
  // error
});

Parameter canvas

HTMLCanvasElement

Parameter type

the content type (optional, defaults to 'image/png')

Parameter quality

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

Shim for [new Blob()](https://developer.mozilla.org/en-US/docs/Web/API/Blob.Blob) to support [older browsers that use the deprecated BlobBuilder API](http://caniuse.com/blob).

Example:

var myBlob = blobUtil.createBlob(['hello world'], {type: 'text/plain'});

Parameter parts

content of the Blob

Parameter properties

usually {type: myContentType}, you can also pass a string for the content type

Returns

Blob

Shim for [URL.createObjectURL()](https://developer.mozilla.org/en-US/docs/Web/API/URL.createObjectURL) to support browsers that only have the prefixed webkitURL (e.g. Android <4.4).

Example:

var myUrl = blobUtil.createObjectURL(blob);

Parameter blob

Returns

url

Convert a data URL string (e.g. 'data:image/png;base64,iVBORw0KG...') to a Blob.

Example:

var blob = blobUtil.dataURLToBlob(dataURL);

Parameter dataURL

dataURL-encoded string

Returns

Blob

Convert an image's src URL to a Blob by loading the image and painting it to a canvas.

Note: this will coerce the image to the desired content type, and it will only paint the first frame of an animated GIF.

Examples:

blobUtil.imgSrcToBlob('http://mysite.com/img.png').then(function (blob) {
  // success
}).catch(function (err) {
  // error
});

blobUtil.imgSrcToBlob('http://some-other-site.com/img.jpg', 'image/jpeg',
                         'Anonymous', 1.0).then(function (blob) {
  // success
}).catch(function (err) {
  // error
});

Parameter src

image src

Parameter type

the content type (optional, defaults to 'image/png')

Parameter crossOrigin

for CORS-enabled images, set this to 'Anonymous' to avoid "tainted canvas" errors

Parameter quality

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

Convert an image's src URL to a data URL by loading the image and painting it to a canvas.

Note: this will coerce the image to the desired content type, and it will only paint the first frame of an animated GIF.

Examples:

blobUtil.imgSrcToDataURL('http://mysite.com/img.png').then(function (dataURL) {
  // success
}).catch(function (err) {
  // error
});

blobUtil.imgSrcToDataURL('http://some-other-site.com/img.jpg', 'image/jpeg',
                         'Anonymous', 1.0).then(function (dataURL) {
  // success
}).catch(function (err) {
  // error
});

Parameter src

image src

Parameter type

the content type (optional, defaults to 'image/png')

Parameter crossOrigin

for CORS-enabled images, set this to 'Anonymous' to avoid "tainted canvas" errors

Parameter quality

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

Shim for [URL.revokeObjectURL()](https://developer.mozilla.org/en-US/docs/Web/API/URL.revokeObjectURL) to support browsers that only have the prefixed webkitURL (e.g. Android <4.4).

Example:

blobUtil.revokeObjectURL(myUrl);

Parameter url