{"id":13448517,"url":"https://github.com/nolanlawson/blob-util","last_synced_at":"2025-05-15T04:03:41.633Z","repository":{"id":57144135,"uuid":"25703486","full_name":"nolanlawson/blob-util","owner":"nolanlawson","description":"Cross-browser utils for working with binary Blobs","archived":false,"fork":false,"pushed_at":"2018-10-28T23:00:48.000Z","size":32019,"stargazers_count":506,"open_issues_count":3,"forks_count":44,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-04-14T01:59:42.448Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://nolanlawson.github.io/blob-util","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nolanlawson.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-10-24T19:02:32.000Z","updated_at":"2025-03-18T11:27:08.000Z","dependencies_parsed_at":"2022-09-06T08:53:46.458Z","dependency_job_id":null,"html_url":"https://github.com/nolanlawson/blob-util","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nolanlawson%2Fblob-util","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nolanlawson%2Fblob-util/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nolanlawson%2Fblob-util/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nolanlawson%2Fblob-util/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nolanlawson","download_url":"https://codeload.github.com/nolanlawson/blob-util/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254052692,"owners_count":22006716,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T05:01:47.834Z","updated_at":"2025-05-15T04:03:41.555Z","avatar_url":"https://github.com/nolanlawson.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"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/)\n=====\n\n`blob-util` is a [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob?redirectlocale=en-US\u0026redirectslug=DOM%2FBlob) library for busy people.\n\nIt offers a small set of cross-browser utilities for translating Blobs to and from different formats:\n\n* `\u003cimg/\u003e` tags\n* base 64 strings\n* binary strings\n* ArrayBuffers\n* data URLs\n* canvas\n\nIt's also a good pairing with the attachment API in [PouchDB](http://pouchdb.com).\n\n**Note**: this is a browser library. For Node.js, see [Buffers](http://nodejs.org/api/buffer.html).\n\n**Topics**:\n\n* [Install](#usage)\n* [Browser support](#browser-support)\n* [Tutorial](#tutorial)\n* [Playground](http://nolanlawson.github.io/blob-util)\n* [API](#api)\n\nInstall\n------\n\n### Using Webpack/Rollup/Babel/TypeScript/etc.\n\nInstall via npm:\n\n```bash\nnpm install blob-util\n```\n\nES module format:\n\n```js\nimport * as blobUtil from 'blob-util'\nblobUtil.canvasToBlob(canvas, 'image/png').then(/* ... */)\n```\n\nOr:\n\n```js\nimport { canvasToBlob } from 'blob-util'\ncanvasToBlob(canvas, 'image/png').then(/* ... */)\n```\n\nCommonJS format:\n\n```js\nvar blobUtil = require('blob-util')\nblobUtil.canvasToBlob(canvas, 'image/png').then(/* ... */)\n```\n\n### As a script tag\n\n```html\n\u003cscript src=\"https://unpkg.com/blob-util/dist/blob-util.min.js\"\u003e\u003c/script\u003e\n```\n\nThen it's available as a global `blobUtil` object:\n\n```js\nblobUtil.canvasToBlob(canvas, 'image/png').then(/* ... */)\n```\n\nBrowser support\n-----\n\nAs of v2.0.0, a built-in `Promise` polyfill is no longer provided. Assuming you provide a `Promise`\npolyfill, the supported browsers are:\n\n* Firefox\n* Chrome\n* Edge\n* IE 10+\n* Safari 6+\n* iOS 6+\n* Android 4+\n* Any browser with either `Blob` or the older `BlobBuilder`; see [caniuse](http://caniuse.com/#search=blob) for details.\n\nTutorial\n--------\n\nBlobs (\u003cstrong\u003eb\u003c/strong\u003einary \u003cstrong\u003el\u003c/strong\u003earge \u003cstrong\u003eob\u003c/strong\u003ejects) are the modern way of working with binary data in the browser. The browser support is [very good](http://caniuse.com/#search=blob).\n\nOnce you have a Blob, you can make it available offline by storing it in [IndexedDB](http://www.w3.org/TR/IndexedDB/), [PouchDB](http://pouchdb.com/), [LocalForage](https://mozilla.github.io/localForage/), or other in-browser databases. So it's the perfect format for working with offline images, sound, and video.\n\nA [File](https://developer.mozilla.org/en-US/docs/Web/API/File) is also a Blob. So if you have an `\u003cinput type=\"file\"\u003e` in your page, you can let your users upload any file and then work with it as a Blob.\n\n### Example\n\nHere's Kirby. He's a famous little Blob.\n\n\u003cimg id=\"kirby\" alt=\"Kirby\" src=\"./test/kirby.gif\"/\u003e\n\nSo let's fulfill his destiny, and convert him to a real `Blob` object.\n\n```js\nvar img = document.getElementById('kirby');\n\nblobUtil.imgSrcToBlob(img.src).then(function (blob) {\n  // ladies and gents, we have a blob\n}).catch(function (err) {\n  // image failed to load\n});\n```\n\n(Don't worry, this won't download the image twice, because browsers are smart.)\n\nNow that we have a `Blob`, we can convert it to a URL and use that as the source for another `\u003cimg/\u003e` tag:\n\n```js\nvar blobURL = blobUtil.createObjectURL(blob);\n\nvar newImg = document.createElement('img');\nnewImg.src = blobURL;\n\ndocument.body.appendChild(newImg);\n```\n\nSo now we have two Kirbys - one with a normal URL, and the other with a blob URL. You can try this out yourself in the [blob-util playground](http://nolanlawson.github.io/blob-util). Super fun!\n\n\u003cimg src=\"blob-util.gif\"/\u003e\n\n\nAPI\n-------\n\n\u003c!-- begin insert API --\u003e\n\n## Index\n\n### Functions\n\n* [arrayBufferToBinaryString](#arraybuffertobinarystring)\n* [arrayBufferToBlob](#arraybuffertoblob)\n* [base64StringToBlob](#base64stringtoblob)\n* [binaryStringToArrayBuffer](#binarystringtoarraybuffer)\n* [binaryStringToBlob](#binarystringtoblob)\n* [blobToArrayBuffer](#blobtoarraybuffer)\n* [blobToBase64String](#blobtobase64string)\n* [blobToBinaryString](#blobtobinarystring)\n* [blobToDataURL](#blobtodataurl)\n* [canvasToBlob](#canvastoblob)\n* [createBlob](#createblob)\n* [createObjectURL](#createobjecturl)\n* [dataURLToBlob](#dataurltoblob)\n* [imgSrcToBlob](#imgsrctoblob)\n* [imgSrcToDataURL](#imgsrctodataurl)\n* [revokeObjectURL](#revokeobjecturl)\n\n---\n\n## Functions\n\n\u003ca id=\"arraybuffertobinarystring\"\u003e\u003c/a\u003e\n\n###  arrayBufferToBinaryString\n\n▸ **arrayBufferToBinaryString**(buffer: *`ArrayBuffer`*): `string`\n\nConvert an `ArrayBuffer` to a binary string.\n\nExample:\n\n```js\nvar myString = blobUtil.arrayBufferToBinaryString(arrayBuff)\n```\n\n**Parameters:**\n\n| Param | Type | Description |\n| ------ | ------ | ------ |\n| buffer | `ArrayBuffer` |  array buffer |\n\n**Returns:** `string`\nbinary string\n\n___\n\u003ca id=\"arraybuffertoblob\"\u003e\u003c/a\u003e\n\n###  arrayBufferToBlob\n\n▸ **arrayBufferToBlob**(buffer: *`ArrayBuffer`*, type?: *`string`*): `Blob`\n\nConvert an `ArrayBuffer` to a `Blob`.\n\nExample:\n\n```js\nvar blob = blobUtil.arrayBufferToBlob(arrayBuff, 'audio/mpeg');\n```\n\n**Parameters:**\n\n| Param | Type | Description |\n| ------ | ------ | ------ |\n| buffer | `ArrayBuffer` |  - |\n| `Optional` type | `string` |  the content type (optional) |\n\n**Returns:** `Blob`\nBlob\n\n___\n\u003ca id=\"base64stringtoblob\"\u003e\u003c/a\u003e\n\n###  base64StringToBlob\n\n▸ **base64StringToBlob**(base64: *`string`*, type?: *`string`*): `Blob`\n\nConvert a base64-encoded string to a `Blob`.\n\nExample:\n\n```js\nvar blob = blobUtil.base64StringToBlob(base64String);\n```\n\n**Parameters:**\n\n| Param | Type | Description |\n| ------ | ------ | ------ |\n| base64 | `string` |  base64-encoded string |\n| `Optional` type | `string` |  the content type (optional) |\n\n**Returns:** `Blob`\nBlob\n\n___\n\u003ca id=\"binarystringtoarraybuffer\"\u003e\u003c/a\u003e\n\n###  binaryStringToArrayBuffer\n\n▸ **binaryStringToArrayBuffer**(binary: *`string`*): `ArrayBuffer`\n\nConvert a binary string to an `ArrayBuffer`.\n\n```js\nvar myBuffer = blobUtil.binaryStringToArrayBuffer(binaryString)\n```\n\n**Parameters:**\n\n| Param | Type | Description |\n| ------ | ------ | ------ |\n| binary | `string` |  binary string |\n\n**Returns:** `ArrayBuffer`\narray buffer\n\n___\n\u003ca id=\"binarystringtoblob\"\u003e\u003c/a\u003e\n\n###  binaryStringToBlob\n\n▸ **binaryStringToBlob**(binary: *`string`*, type?: *`string`*): `Blob`\n\nConvert a binary string to a `Blob`.\n\nExample:\n\n```js\nvar blob = blobUtil.binaryStringToBlob(binaryString);\n```\n\n**Parameters:**\n\n| Param | Type | Description |\n| ------ | ------ | ------ |\n| binary | `string` |  binary string |\n| `Optional` type | `string` |  the content type (optional) |\n\n**Returns:** `Blob`\nBlob\n\n___\n\u003ca id=\"blobtoarraybuffer\"\u003e\u003c/a\u003e\n\n###  blobToArrayBuffer\n\n▸ **blobToArrayBuffer**(blob: *`Blob`*): `Promise`\u003c`ArrayBuffer`\u003e\n\nConvert a `Blob` to an `ArrayBuffer`.\n\nExample:\n\n```js\nblobUtil.blobToArrayBuffer(blob).then(function (arrayBuff) {\n  // success\n}).catch(function (err) {\n  // error\n});\n```\n\n**Parameters:**\n\n| Param | Type | Description |\n| ------ | ------ | ------ |\n| blob | `Blob` |  - |\n\n**Returns:** `Promise`\u003c`ArrayBuffer`\u003e\nPromise that resolves with the `ArrayBuffer`\n\n___\n\u003ca id=\"blobtobase64string\"\u003e\u003c/a\u003e\n\n###  blobToBase64String\n\n▸ **blobToBase64String**(blob: *`Blob`*): `Promise`\u003c`string`\u003e\n\nConvert a `Blob` to a binary string.\n\nExample:\n\n```js\nblobUtil.blobToBase64String(blob).then(function (base64String) {\n  // success\n}).catch(function (err) {\n  // error\n});\n```\n\n**Parameters:**\n\n| Param | Type | Description |\n| ------ | ------ | ------ |\n| blob | `Blob` |  - |\n\n**Returns:** `Promise`\u003c`string`\u003e\nPromise that resolves with the binary string\n\n___\n\u003ca id=\"blobtobinarystring\"\u003e\u003c/a\u003e\n\n###  blobToBinaryString\n\n▸ **blobToBinaryString**(blob: *`Blob`*): `Promise`\u003c`string`\u003e\n\nConvert a `Blob` to a binary string.\n\nExample:\n\n```js\nblobUtil.blobToBinaryString(blob).then(function (binaryString) {\n  // success\n}).catch(function (err) {\n  // error\n});\n```\n\n**Parameters:**\n\n| Param | Type | Description |\n| ------ | ------ | ------ |\n| blob | `Blob` |  - |\n\n**Returns:** `Promise`\u003c`string`\u003e\nPromise that resolves with the binary string\n\n___\n\u003ca id=\"blobtodataurl\"\u003e\u003c/a\u003e\n\n###  blobToDataURL\n\n▸ **blobToDataURL**(blob: *`Blob`*): `Promise`\u003c`string`\u003e\n\nConvert a `Blob` to a data URL string (e.g. `'data:image/png;base64,iVBORw0KG...'`).\n\nExample:\n\n```js\nvar dataURL = blobUtil.blobToDataURL(blob);\n```\n\n**Parameters:**\n\n| Param | Type | Description |\n| ------ | ------ | ------ |\n| blob | `Blob` |  - |\n\n**Returns:** `Promise`\u003c`string`\u003e\nPromise that resolves with the data URL string\n\n___\n\u003ca id=\"canvastoblob\"\u003e\u003c/a\u003e\n\n###  canvasToBlob\n\n▸ **canvasToBlob**(canvas: *`HTMLCanvasElement`*, type?: *`string`*, quality?: *`number`*): `Promise`\u003c`Blob`\u003e\n\nConvert a `canvas` to a `Blob`.\n\nExamples:\n\n```js\nblobUtil.canvasToBlob(canvas).then(function (blob) {\n  // success\n}).catch(function (err) {\n  // error\n});\n```\n\nMost 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'`):\n\n```js\nblobUtil.canvasToBlob(canvas, 'image/webp').then(function (blob) {\n  // success\n}).catch(function (err) {\n  // error\n});\n```\n\n**Parameters:**\n\n| Param | Type | Description |\n| ------ | ------ | ------ |\n| canvas | `HTMLCanvasElement` |  HTMLCanvasElement |\n| `Optional` type | `string` |  the content type (optional, defaults to 'image/png') |\n| `Optional` quality | `number` |  a number between 0 and 1 indicating image quality if the requested type is 'image/jpeg' or 'image/webp' |\n\n**Returns:** `Promise`\u003c`Blob`\u003e\nPromise that resolves with the `Blob`\n\n___\n\u003ca id=\"createblob\"\u003e\u003c/a\u003e\n\n###  createBlob\n\n▸ **createBlob**(parts: *`Array`\u003c`any`\u003e*, properties?: * `BlobPropertyBag` \u0026#124; `string`*): `Blob`\n\nShim 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).\n\nExample:\n\n```js\nvar myBlob = blobUtil.createBlob(['hello world'], {type: 'text/plain'});\n```\n\n**Parameters:**\n\n| Param | Type | Description |\n| ------ | ------ | ------ |\n| parts | `Array`\u003c`any`\u003e |  content of the Blob |\n| `Optional` properties |  `BlobPropertyBag` \u0026#124; `string`|  usually `{type: myContentType}`, you can also pass a string for the content type |\n\n**Returns:** `Blob`\nBlob\n\n___\n\u003ca id=\"createobjecturl\"\u003e\u003c/a\u003e\n\n###  createObjectURL\n\n▸ **createObjectURL**(blob: *`Blob`*): `string`\n\nShim 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 \u003c4.4).\n\nExample:\n\n```js\nvar myUrl = blobUtil.createObjectURL(blob);\n```\n\n**Parameters:**\n\n| Param | Type | Description |\n| ------ | ------ | ------ |\n| blob | `Blob` |  - |\n\n**Returns:** `string`\nurl\n\n___\n\u003ca id=\"dataurltoblob\"\u003e\u003c/a\u003e\n\n###  dataURLToBlob\n\n▸ **dataURLToBlob**(dataURL: *`string`*): `Blob`\n\nConvert a data URL string (e.g. `'data:image/png;base64,iVBORw0KG...'`) to a `Blob`.\n\nExample:\n\n```js\nvar blob = blobUtil.dataURLToBlob(dataURL);\n```\n\n**Parameters:**\n\n| Param | Type | Description |\n| ------ | ------ | ------ |\n| dataURL | `string` |  dataURL-encoded string |\n\n**Returns:** `Blob`\nBlob\n\n___\n\u003ca id=\"imgsrctoblob\"\u003e\u003c/a\u003e\n\n###  imgSrcToBlob\n\n▸ **imgSrcToBlob**(src: *`string`*, type?: *`string`*, crossOrigin?: *`string`*, quality?: *`number`*): `Promise`\u003c`Blob`\u003e\n\nConvert an image's `src` URL to a `Blob` by loading the image and painting it to a `canvas`.\n\nNote: this will coerce the image to the desired content type, and it will only paint the first frame of an animated GIF.\n\nExamples:\n\n```js\nblobUtil.imgSrcToBlob('http://mysite.com/img.png').then(function (blob) {\n  // success\n}).catch(function (err) {\n  // error\n});\n```\n```js\nblobUtil.imgSrcToBlob('http://some-other-site.com/img.jpg', 'image/jpeg',\n                         'Anonymous', 1.0).then(function (blob) {\n  // success\n}).catch(function (err) {\n  // error\n});\n```\n\n**Parameters:**\n\n| Param | Type | Description |\n| ------ | ------ | ------ |\n| src | `string` |  image src |\n| `Optional` type | `string` |  the content type (optional, defaults to 'image/png') |\n| `Optional` crossOrigin | `string` |  for CORS-enabled images, set this to 'Anonymous' to avoid \"tainted canvas\" errors |\n| `Optional` quality | `number` |  a number between 0 and 1 indicating image quality if the requested type is 'image/jpeg' or 'image/webp' |\n\n**Returns:** `Promise`\u003c`Blob`\u003e\nPromise that resolves with the `Blob`\n\n___\n\u003ca id=\"imgsrctodataurl\"\u003e\u003c/a\u003e\n\n###  imgSrcToDataURL\n\n▸ **imgSrcToDataURL**(src: *`string`*, type?: *`string`*, crossOrigin?: *`string`*, quality?: *`number`*): `Promise`\u003c`string`\u003e\n\nConvert an image's `src` URL to a data URL by loading the image and painting it to a `canvas`.\n\nNote: this will coerce the image to the desired content type, and it will only paint the first frame of an animated GIF.\n\nExamples:\n\n```js\nblobUtil.imgSrcToDataURL('http://mysite.com/img.png').then(function (dataURL) {\n  // success\n}).catch(function (err) {\n  // error\n});\n```\n```js\nblobUtil.imgSrcToDataURL('http://some-other-site.com/img.jpg', 'image/jpeg',\n                         'Anonymous', 1.0).then(function (dataURL) {\n  // success\n}).catch(function (err) {\n  // error\n});\n```\n\n**Parameters:**\n\n| Param | Type | Description |\n| ------ | ------ | ------ |\n| src | `string` |  image src |\n| `Optional` type | `string` |  the content type (optional, defaults to 'image/png') |\n| `Optional` crossOrigin | `string` |  for CORS-enabled images, set this to 'Anonymous' to avoid \"tainted canvas\" errors |\n| `Optional` quality | `number` |  a number between 0 and 1 indicating image quality if the requested type is 'image/jpeg' or 'image/webp' |\n\n**Returns:** `Promise`\u003c`string`\u003e\nPromise that resolves with the data URL string\n\n___\n\u003ca id=\"revokeobjecturl\"\u003e\u003c/a\u003e\n\n###  revokeObjectURL\n\n▸ **revokeObjectURL**(url: *`string`*): `void`\n\nShim 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 \u003c4.4).\n\nExample:\n\n```js\nblobUtil.revokeObjectURL(myUrl);\n```\n\n**Parameters:**\n\n| Param | Type | Description |\n| ------ | ------ | ------ |\n| url | `string` |   |\n\n**Returns:** `void`\n\n___\n\n\n\n\u003c!-- end insert API --\u003e\n\nCredits\n----\n\nThanks to the rest of [the PouchDB team](https://github.com/pouchdb/pouchdb/graphs/contributors) for figuring most of this crazy stuff out.\n\nBuilding the library\n----\n\n    npm install\n    npm run build\n\nTesting the library\n----\n\n    npm install\n\nThen to test in the browser using Saucelabs:\n\n    npm test\n\nOr to test locally in your browser of choice:\n\n    npm run test-local\n\nTo build the API docs and insert them in the README:\n\n    npm run doc\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnolanlawson%2Fblob-util","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnolanlawson%2Fblob-util","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnolanlawson%2Fblob-util/lists"}