blob-util

blob-util is a focused browser library for working with the Blob API. Rather than hand-rolling conversion logic every time an app needs to move data between formats, it gives you a single small toolkit for translating Blobs to and from <img> tags, base64 strings, binary strings, ArrayBuffers, data URLs, and canvas elements.

It was built to pair with PouchDB’s attachment API, where binary data routinely needs to move between IndexedDB, network responses, and the DOM, but it works equally well for any app handling file uploads, offline image caching, or canvas-based image processing. Every function is a plain, dependency-free wrapper around native browser APIs, with fallback shims (like the legacy BlobBuilder family and prefixed webkitURL) so the same code works across older and modern browsers alike.

What You Get

• Blob construction - createBlob builds a Blob from parts and a content type, falling back to the legacy BlobBuilder API on older browsers.
• Object URL shims - createObjectURL/revokeObjectURL wrap URL.createObjectURL/revokeObjectURL with a webkitURL fallback for older Android browsers.
• String conversions - blobToBinaryString, blobToBase64String, base64StringToBlob, and binaryStringToBlob move data between Blobs and encoded strings.
• ArrayBuffer conversions - arrayBufferToBlob, blobToArrayBuffer, arrayBufferToBinaryString, and binaryStringToArrayBuffer bridge Blobs, buffers, and binary strings.
• Data URL conversions - dataURLToBlob and blobToDataURL convert between Blobs and data: URI strings.
• Image and canvas conversions - imgSrcToBlob, imgSrcToDataURL, and canvasToBlob load an <img> source into a canvas and export it as a Blob or data URL.

Common Use Cases

• Offline image caching - converting fetched <img> sources into Blobs so they can be stored in IndexedDB, PouchDB, or another in-browser database for offline use.
• File upload handling - turning <input type="file"> selections (which are Blobs) into base64 or data URL strings for preview or upload.
• PouchDB attachments - preparing binary attachment data in the format PouchDB’s attachment API expects.
• Canvas image export - exporting a <canvas> element’s contents as a downloadable or storable Blob/data URL after client-side image manipulation.

Under The Hood

Architecture blob-util is a single flat TypeScript module (src/blob-util.ts) exporting roughly 16 pure, stateless conversion functions, backed by a tiny private helper module (src/private.ts) with loadImage and imgToCanvas used only by the image-to-canvas functions. There are no classes, no shared mutable state, and no dependency injection — each function takes browser-native inputs (Blob, ArrayBuffer, canvas, string) and returns either a plain value or a Promise. Several functions compose others internally (binaryStringToBlob calls base64StringToBlob, imgSrcToBlob calls canvasToBlob), giving the module a shallow, easy-to-follow call graph. Cross-browser compatibility is handled through explicit runtime feature detection rather than build-time branching: createBlob catches a TypeError from new Blob() and falls back to whichever legacy BlobBuilder implementation is present, and createObjectURL/revokeObjectURL check for a global URL before falling back to prefixed webkitURL.

Tech Stack The library is authored in TypeScript and compiled with tsc, then bundled into ES module, CommonJS, and UMD builds with Rollup, and minified with uglify-js — producing the dist/blob-util.es.js, dist/blob-util.cjs.js, and dist/blob-util.js artifacts referenced from package.json’s module/main/types fields. It has zero runtime dependencies, relying purely on native browser APIs (Blob, FileReader, HTMLCanvasElement, URL/webkitURL, atob/btoa). API documentation is generated from TypeScript doc comments via typedoc (with the markdown theme) and stitched back into the README by a small custom Node script (bin/write-docs-to-readme.js).

Code Quality Tests live in test/test.js and are written with Mocha, Chai, and chai-as-promised, exercising the built CommonJS bundle against real DOM <img> elements and canvases; they were historically run cross-browser via Zuul against Sauce Labs, orchestrated by a now-defunct .travis.yml CI config rather than a modern CI provider. Every exported function carries TypeScript parameter/return types and JSDoc-style comments with runnable examples, and the codebase is linted with standard for JavaScript and tslint for TypeScript. Error handling is explicit but minimal: FileReader-based conversions reject the returned Promise via reader.onerror, and createBlob’s legacy fallback re-throws any error that isn’t the expected TypeError.

What Makes It Unique blob-util isn’t attempting anything algorithmically novel — Blob/base64/ArrayBuffer/canvas conversion is a well-trodden problem — but it consolidates the cross-browser shimming (legacy BlobBuilder variants, prefixed webkitURL, missing readAsBinaryString) that apps would otherwise reimplement inline, in a single dependency-free package small enough to audit in one sitting.