This commit is contained in:
Nolan Lawson 2018-05-21 13:47:44 -07:00
parent 244a5943fc
commit d0534719bc

769
README.md
View File

@ -1,4 +1,4 @@
blob-util [![Build Status](https://travis-ci.org/nolanlawson/blob-util.svg)](https://travis-ci.org/nolanlawson/blob-util) blob-util [![Build Status](https://travis-ci.org/nolanlawson/blob-util.svg)](https://travis-ci.org/nolanlawson/blob-util) [![TypeScript](https://img.shields.io/badge/%3C%2F%3E-typescript-blue.svg)](http://www.typescriptlang.org/)
===== =====
`blob-util` is a [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob?redirectlocale=en-US&redirectslug=DOM%2FBlob) library for busy people. `blob-util` is a [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob?redirectlocale=en-US&redirectslug=DOM%2FBlob) library for busy people.
@ -117,328 +117,161 @@ API
<!-- begin insert API --> <!-- begin insert API -->
### Overview ## Index
* [createBlob(parts, options)](#createBlob) ### Functions
* [createObjectURL(blob)](#createObjectURL)
* [revokeObjectURL(url)](#revokeObjectURL)
* [blobToBinaryString(blob)](#blobToBinaryString)
* [base64StringToBlob(base64, type)](#base64StringToBlob)
* [binaryStringToBlob(binary, type)](#binaryStringToBlob)
* [blobToBase64String(blob)](#blobToBase64String)
* [dataURLToBlob(dataURL)](#dataURLToBlob)
* [blobToDataURL(blob)](#blobToDataURL)
* [imgSrcToDataURL(src, type, crossOrigin, quality)](#imgSrcToDataURL)
* [canvasToBlob(canvas, type, quality)](#canvasToBlob)
* [imgSrcToBlob(src, type, crossOrigin, quality)](#imgSrcToBlob)
* [arrayBufferToBlob(buffer, type)](#arrayBufferToBlob)
* [blobToArrayBuffer(blob)](#blobToArrayBuffer)
* [arrayBufferToBinaryString(buffer)](#arrayBufferToBinaryString)
* [binaryStringToArrayBuffer(binary)](#binaryStringToArrayBuffer)
<a name="createBlob"></a> * [arrayBufferToBinaryString](#arraybuffertobinarystring)
### createBlob(parts, options) * [arrayBufferToBlob](#arraybuffertoblob)
Shim for * [base64StringToBlob](#base64stringtoblob)
[new Blob()](https://developer.mozilla.org/en-US/docs/Web/API/Blob.Blob) * [binaryStringToArrayBuffer](#binarystringtoarraybuffer)
to support * [binaryStringToBlob](#binarystringtoblob)
[older browsers that use the deprecated <code>BlobBuilder</code> API](http://caniuse.com/blob). * [blobToArrayBuffer](#blobtoarraybuffer)
* [blobToBase64String](#blobtobase64string)
* [blobToBinaryString](#blobtobinarystring)
* [blobToDataURL](#blobtodataurl)
* [canvasToBlob](#canvastoblob)
* [createBlob](#createblob)
* [createObjectURL](#createobjecturl)
* [dataURLToBlob](#dataurltoblob)
* [imgSrcToBlob](#imgsrctoblob)
* [imgSrcToDataURL](#imgsrctodataurl)
* [revokeObjectURL](#revokeobjecturl)
**Params** ---
- parts `Array` - content of the <code>Blob</code> ## Functions
- options `Object` - usually just <code>{type: myContentType}</code>, you can also pass a string for the content type
**Returns**: `Blob` <a id="arraybuffertobinarystring"></a>
**Example**: ### arrayBufferToBinaryString
**arrayBufferToBinaryString**(buffer: *`ArrayBuffer`*): `string`
Convert an `ArrayBuffer` to a binary string.
Example:
```js ```js
var myBlob = blobUtil.createBlob(['hello world'], {type: 'text/plain'}); var myString = blobUtil.arrayBufferToBinaryString(arrayBuff)
``` ```
<a name="createObjectURL"></a> **Parameters:**
### createObjectURL(blob)
Shim for
[URL.createObjectURL()](https://developer.mozilla.org/en-US/docs/Web/API/URL.createObjectURL)
to support browsers that only have the prefixed
<code>webkitURL</code> (e.g. Android <4.4).
**Params** | Param | Type | Description |
| ------ | ------ | ------ |
| buffer | `ArrayBuffer` | array buffer |
- blob `Blob` **Returns:** `string`
binary string
**Returns**: `string` - url ___
<a id="arraybuffertoblob"></a>
**Example**: ### arrayBufferToBlob
```js **arrayBufferToBlob**(buffer: *`ArrayBuffer`*, type?: *`string`*): `Blob`
var myUrl = blobUtil.createObjectURL(blob);
```
<a name="revokeObjectURL"></a> Convert an `ArrayBuffer` to a `Blob`.
### revokeObjectURL(url)
Shim for
[URL.revokeObjectURL()](https://developer.mozilla.org/en-US/docs/Web/API/URL.revokeObjectURL)
to support browsers that only have the prefixed
<code>webkitURL</code> (e.g. Android <4.4).
**Params** Example:
- url `string`
**Example**:
```js
blobUtil.revokeObjectURL(myUrl);
```
<a name="blobToBinaryString"></a>
### blobToBinaryString(blob)
Convert a <code>Blob</code> to a binary string.
**Params**
- blob `Blob`
**Returns**: `Promise` - Promise that resolves with the binary string
**Example**:
```js
blobUtil.blobToBinaryString(blob).then(function (binaryString) {
// success
}).catch(function (err) {
// error
});
```
<a name="base64StringToBlob"></a>
### base64StringToBlob(base64, type)
Convert a base64-encoded string to a <code>Blob</code>.
**Params**
- base64 `string`
- type `string` | `undefined` - the content type (optional)
**Returns**: <code>Blob</code>
**Example**:
```js
var blob = blobUtil.base64StringToBlob(base64String);
```
<a name="binaryStringToBlob"></a>
### binaryStringToBlob(binary, type)
Convert a binary string to a <code>Blob</code>.
**Params**
- binary `string`
- type `string` | `undefined` - the content type (optional)
**Returns**: `Blob`
**Example**:
```js
var blob = blobUtil.binaryStringToBlob(binaryString);
```
<a name="blobToBase64String"></a>
### blobToBase64String(blob)
Convert a <code>Blob</code> to a binary string.
**Params**
- blob `Blob`
**Returns**: `Promise` - Promise that resolves with the binary string
**Example**:
```js
blobUtil.blobToBase64String(blob).then(function (base64String) {
// success
}).catch(function (err) {
// error
});
```
<a name="dataURLToBlob"></a>
### dataURLToBlob(dataURL)
Convert a data URL string
(e.g. <code>'data:image/png;base64,iVBORw0KG...'</code>)
to a <code>Blob</code>.
**Params**
- dataURL `string`
**Returns**: `Blob`
**Example**:
```js
var blob = blobUtil.dataURLToBlob(dataURL);
```
<a name="blobToDataURL"></a>
### blobToDataURL(blob)
Convert a <code>Blob</code> to a data URL string
(e.g. <code>'data:image/png;base64,iVBORw0KG...'</code>).
**Params**
- blob `Blob`
**Returns**: `string` - data URL string
**Example**:
```js
var dataURL = blobUtil.blobToDataURL(blob);
```
<a name="imgSrcToDataURL"></a>
### imgSrcToDataURL(src, type, crossOrigin, quality)
Convert an image's <code>src</code> URL to a data URL by loading the image and painting
it to a <code>canvas</code>.
<p/>Note: this will coerce the image to the desired content type, and it
will only paint the first frame of an animated GIF.
**Params**
- 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` - Promise that resolves with the data URL string
**Examples**:
```js
blobUtil.imgSrcToDataURL('http://mysite.com/img.png').then(function (dataURL) {
// success
}).catch(function (err) {
// error
});
```
```js
blobUtil.imgSrcToDataURL('http://some-other-site.com/img.jpg', 'image/jpeg',
'Anonymous', 1.0).then(function (dataURL) {
// success
}).catch(function (err) {
// error
});
```
<a name="canvasToBlob"></a>
### canvasToBlob(canvas, type, quality)
Convert a <code>canvas</code> to a <code>Blob</code>.
**Params**
- 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` - Promise that resolves with the <code>Blob</code>
**Examples**:
```js
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'`):
```js
blobUtil.canvasToBlob(canvas, 'image/webp').then(function (blob) {
// success
}).catch(function (err) {
// error
});
```
<a name="imgSrcToBlob"></a>
### imgSrcToBlob(src, type, crossOrigin, quality)
Convert an image's <code>src</code> URL to a <code>Blob</code> by loading the image and painting
it to a <code>canvas</code>.
<p/>Note: this will coerce the image to the desired content type, and it
will only paint the first frame of an animated GIF.
**Params**
- 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` - Promise that resolves with the <code>Blob</code>
**Examples**:
```js
blobUtil.imgSrcToBlob('http://mysite.com/img.png').then(function (blob) {
// success
}).catch(function (err) {
// error
});
```
```js
blobUtil.imgSrcToBlob('http://some-other-site.com/img.jpg', 'image/jpeg',
'Anonymous', 1.0).then(function (blob) {
// success
}).catch(function (err) {
// error
});
```
<a name="arrayBufferToBlob"></a>
### arrayBufferToBlob(buffer, type)
Convert an <code>ArrayBuffer</code> to a <code>Blob</code>.
**Params**
- buffer `ArrayBuffer`
- type `string` | `undefined` - the content type (optional)
**Returns**: `Blob`
**Example**:
```js ```js
var blob = blobUtil.arrayBufferToBlob(arrayBuff, 'audio/mpeg'); var blob = blobUtil.arrayBufferToBlob(arrayBuff, 'audio/mpeg');
``` ```
<a name="blobToArrayBuffer"></a> **Parameters:**
### blobToArrayBuffer(blob)
Convert a <code>Blob</code> to an <code>ArrayBuffer</code>.
**Params** | Param | Type | Description |
| ------ | ------ | ------ |
| buffer | `ArrayBuffer` | - |
| `Optional` type | `string` | the content type (optional) |
- blob `Blob` **Returns:** `Blob`
Blob
**Returns**: `Promise` - Promise that resolves with the <code>ArrayBuffer</code> ___
<a id="base64stringtoblob"></a>
**Example**: ### base64StringToBlob
**base64StringToBlob**(base64: *`string`*, type?: *`string`*): `Blob`
Convert a base64-encoded string to a `Blob`.
Example:
```js
var blob = blobUtil.base64StringToBlob(base64String);
```
**Parameters:**
| Param | Type | Description |
| ------ | ------ | ------ |
| base64 | `string` | base64-encoded string |
| `Optional` type | `string` | the content type (optional) |
**Returns:** `Blob`
Blob
___
<a id="binarystringtoarraybuffer"></a>
### binaryStringToArrayBuffer
**binaryStringToArrayBuffer**(binary: *`string`*): `ArrayBuffer`
Convert a binary string to an `ArrayBuffer`.
```js
var myBuffer = blobUtil.binaryStringToArrayBuffer(binaryString)
```
**Parameters:**
| Param | Type | Description |
| ------ | ------ | ------ |
| binary | `string` | binary string |
**Returns:** `ArrayBuffer`
array buffer
___
<a id="binarystringtoblob"></a>
### binaryStringToBlob
**binaryStringToBlob**(binary: *`string`*, type?: *`string`*): `Blob`
Convert a binary string to a `Blob`.
Example:
```js
var blob = blobUtil.binaryStringToBlob(binaryString);
```
**Parameters:**
| Param | Type | Description |
| ------ | ------ | ------ |
| binary | `string` | binary string |
| `Optional` type | `string` | the content type (optional) |
**Returns:** `Blob`
Blob
___
<a id="blobtoarraybuffer"></a>
### blobToArrayBuffer
**blobToArrayBuffer**(blob: *`Blob`*): `Promise`<`ArrayBuffer`>
Convert a `Blob` to an `ArrayBuffer`.
Example:
```js ```js
blobUtil.blobToArrayBuffer(blob).then(function (arrayBuff) { blobUtil.blobToArrayBuffer(blob).then(function (arrayBuff) {
@ -448,38 +281,348 @@ blobUtil.blobToArrayBuffer(blob).then(function (arrayBuff) {
}); });
``` ```
<a name="arrayBufferToBinaryString"></a> **Parameters:**
### arrayBufferToBinaryString(buffer)
Convert an <code>ArrayBuffer</code> to a binary string. Returns the binary string.
**Params** | Param | Type | Description |
| ------ | ------ | ------ |
| blob | `Blob` | - |
- buffer `ArrayBuffer` **Returns:** `Promise`<`ArrayBuffer`>
Promise that resolves with the <code>ArrayBuffer</code>
**Returns**: `string` - binary string ___
<a id="blobtobase64string"></a>
**Example**: ### blobToBase64String
**blobToBase64String**(blob: *`Blob`*): `Promise`<`string`>
Convert a `Blob` to a binary string.
Example:
```js ```js
var myString = blobUtil.arrayBufferToBinaryString(arrayBuff) blobUtil.blobToBase64String(blob).then(function (base64String) {
// success
}).catch(function (err) {
// error
});
``` ```
<a name="binaryStringToArrayBuffer"></a> **Parameters:**
### binaryStringToArrayBuffer(binary)
Convert a binary string to an <code>ArrayBuffer</code> to a binary string. Returns the <code>ArrayBuffer</code>
**Params** | Param | Type | Description |
| ------ | ------ | ------ |
| blob | `Blob` | - |
- binary string **Returns:** `Promise`<`string`>
Promise that resolves with the binary string
**Returns**: `ArrayBuffer` ___
<a id="blobtobinarystring"></a>
**Example**: ### blobToBinaryString
**blobToBinaryString**(blob: *`Blob`*): `Promise`<`string`>
Convert a `Blob` to a binary string.
Example:
```js ```js
var myBuffer = blobUtil.binaryStringToArrayBuffer(binaryString) blobUtil.blobToBinaryString(blob).then(function (binaryString) {
// success
}).catch(function (err) {
// error
});
``` ```
**Parameters:**
| Param | Type | Description |
| ------ | ------ | ------ |
| blob | `Blob` | - |
**Returns:** `Promise`<`string`>
Promise that resolves with the binary string
___
<a id="blobtodataurl"></a>
### blobToDataURL
**blobToDataURL**(blob: *`Blob`*): `Promise`<`string`>
Convert a `Blob` to a data URL string (e.g. `'data:image/png;base64,iVBORw0KG...'`).
Example:
```js
var dataURL = blobUtil.blobToDataURL(blob);
```
**Parameters:**
| Param | Type | Description |
| ------ | ------ | ------ |
| blob | `Blob` | - |
**Returns:** `Promise`<`string`>
Promise that resolves with the data URL string
___
<a id="canvastoblob"></a>
### canvasToBlob
**canvasToBlob**(canvas: *`HTMLCanvasElement`*, type?: *`string`*, quality?: *`number`*): `Promise`<`Blob`>
Convert a `canvas` to a `Blob`.
Examples:
```js
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'`):
```js
blobUtil.canvasToBlob(canvas, 'image/webp').then(function (blob) {
// success
}).catch(function (err) {
// error
});
```
**Parameters:**
| Param | Type | Description |
| ------ | ------ | ------ |
| canvas | `HTMLCanvasElement` | HTMLCanvasElement |
| `Optional` type | `string` | the content type (optional, defaults to 'image/png') |
| `Optional` quality | `number` | a number between 0 and 1 indicating image quality if the requested type is 'image/jpeg' or 'image/webp' |
**Returns:** `Promise`<`Blob`>
Promise that resolves with the <code>Blob</code>
___
<a id="createblob"></a>
### createBlob
**createBlob**(parts: *`Array`<`any`>*, properties?: * `BlobPropertyBag` &#124; `string`*): `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:
```js
var myBlob = blobUtil.createBlob(['hello world'], {type: 'text/plain'});
```
**Parameters:**
| Param | Type | Description |
| ------ | ------ | ------ |
| parts | `Array`<`any`> | content of the <code>Blob</code> |
| `Optional` properties | `BlobPropertyBag` &#124; `string`| usually <code>{type: myContentType}</code>, you can also pass a string for the content type |
**Returns:** `Blob`
Blob
___
<a id="createobjecturl"></a>
### createObjectURL
**createObjectURL**(blob: *`Blob`*): `string`
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:
```js
var myUrl = blobUtil.createObjectURL(blob);
```
**Parameters:**
| Param | Type | Description |
| ------ | ------ | ------ |
| blob | `Blob` | - |
**Returns:** `string`
url
___
<a id="dataurltoblob"></a>
### dataURLToBlob
**dataURLToBlob**(dataURL: *`string`*): `Blob`
Convert a data URL string (e.g. `'data:image/png;base64,iVBORw0KG...'`) to a `Blob`.
Example:
```js
var blob = blobUtil.dataURLToBlob(dataURL);
```
**Parameters:**
| Param | Type | Description |
| ------ | ------ | ------ |
| dataURL | `string` | dataURL-encoded string |
**Returns:** `Blob`
Blob
___
<a id="imgsrctoblob"></a>
### imgSrcToBlob
**imgSrcToBlob**(src: *`string`*, type?: *`string`*, crossOrigin?: *`string`*, quality?: *`number`*): `Promise`<`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:
```js
blobUtil.imgSrcToBlob('http://mysite.com/img.png').then(function (blob) {
// success
}).catch(function (err) {
// error
});
```
```js
blobUtil.imgSrcToBlob('http://some-other-site.com/img.jpg', 'image/jpeg',
'Anonymous', 1.0).then(function (blob) {
// success
}).catch(function (err) {
// error
});
```
**Parameters:**
| Param | Type | Description |
| ------ | ------ | ------ |
| src | `string` | image src |
| `Optional` type | `string` | the content type (optional, defaults to 'image/png') |
| `Optional` crossOrigin | `string` | for CORS-enabled images, set this to 'Anonymous' to avoid "tainted canvas" errors |
| `Optional` quality | `number` | a number between 0 and 1 indicating image quality if the requested type is 'image/jpeg' or 'image/webp' |
**Returns:** `Promise`<`Blob`>
Promise that resolves with the <code>Blob</code>
___
<a id="imgsrctodataurl"></a>
### imgSrcToDataURL
**imgSrcToDataURL**(src: *`string`*, type?: *`string`*, crossOrigin?: *`string`*, quality?: *`number`*): `Promise`<`string`>
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:
```js
blobUtil.imgSrcToDataURL('http://mysite.com/img.png').then(function (dataURL) {
// success
}).catch(function (err) {
// error
});
```
```js
blobUtil.imgSrcToDataURL('http://some-other-site.com/img.jpg', 'image/jpeg',
'Anonymous', 1.0).then(function (dataURL) {
// success
}).catch(function (err) {
// error
});
```
**Parameters:**
| Param | Type | Description |
| ------ | ------ | ------ |
| src | `string` | image src |
| `Optional` type | `string` | the content type (optional, defaults to 'image/png') |
| `Optional` crossOrigin | `string` | for CORS-enabled images, set this to 'Anonymous' to avoid "tainted canvas" errors |
| `Optional` quality | `number` | a number between 0 and 1 indicating image quality if the requested type is 'image/jpeg' or 'image/webp' |
**Returns:** `Promise`<`string`>
Promise that resolves with the data URL string
___
<a id="imgtocanvas"></a>
### `<Private>` imgToCanvas
**imgToCanvas**(img: *`any`*): `HTMLCanvasElement`
**Parameters:**
| Param | Type |
| ------ | ------ |
| img | `any` |
**Returns:** `HTMLCanvasElement`
___
<a id="loadimage"></a>
### `<Private>` loadImage
**loadImage**(src: *`any`*, crossOrigin: *`any`*): `Promise`<`Object`>
**Parameters:**
| Param | Type |
| ------ | ------ |
| src | `any` |
| crossOrigin | `any` |
**Returns:** `Promise`<`Object`>
___
<a id="revokeobjecturl"></a>
### revokeObjectURL
**revokeObjectURL**(url: *`string`*): `void`
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:
```js
blobUtil.revokeObjectURL(myUrl);
```
**Parameters:**
| Param | Type | Description |
| ------ | ------ | ------ |
| url | `string` | |
**Returns:** `void`
___
<!-- end insert API --> <!-- end insert API -->
Credits Credits