461 lines
14 KiB
JavaScript
461 lines
14 KiB
JavaScript
(function (global, factory) {
|
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
|
|
typeof define === 'function' && define.amd ? define(['exports'], factory) :
|
|
(factory((global.blobUtil = {})));
|
|
}(this, (function (exports) { 'use strict';
|
|
|
|
// TODO: including these in blob-util.ts causes typedoc to generate docs for them,
|
|
// even with --excludePrivate ¯\_(ツ)_/¯
|
|
/** @private */
|
|
function loadImage(src, crossOrigin) {
|
|
return new Promise(function (resolve, reject) {
|
|
var img = new Image();
|
|
if (crossOrigin) {
|
|
img.crossOrigin = crossOrigin;
|
|
}
|
|
img.onload = function () {
|
|
resolve(img);
|
|
};
|
|
img.onerror = reject;
|
|
img.src = src;
|
|
});
|
|
}
|
|
/** @private */
|
|
function imgToCanvas(img) {
|
|
var canvas = document.createElement('canvas');
|
|
canvas.width = img.width;
|
|
canvas.height = img.height;
|
|
// copy the image contents to the canvas
|
|
var context = canvas.getContext('2d');
|
|
context.drawImage(img, 0, 0, img.width, img.height, 0, 0, img.width, img.height);
|
|
return canvas;
|
|
}
|
|
|
|
/* global Promise, Image, Blob, FileReader, atob, btoa,
|
|
BlobBuilder, MSBlobBuilder, MozBlobBuilder, WebKitBlobBuilder, webkitURL */
|
|
/**
|
|
* 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'});
|
|
* ```
|
|
*
|
|
* @param parts - content of the Blob
|
|
* @param properties - usually `{type: myContentType}`,
|
|
* you can also pass a string for the content type
|
|
* @returns Blob
|
|
*/
|
|
function createBlob(parts, properties) {
|
|
parts = parts || [];
|
|
properties = properties || {};
|
|
if (typeof properties === 'string') {
|
|
properties = { type: properties }; // infer content type
|
|
}
|
|
try {
|
|
return new Blob(parts, properties);
|
|
}
|
|
catch (e) {
|
|
if (e.name !== 'TypeError') {
|
|
throw e;
|
|
}
|
|
var Builder = typeof BlobBuilder !== 'undefined'
|
|
? BlobBuilder : typeof MSBlobBuilder !== 'undefined'
|
|
? MSBlobBuilder : typeof MozBlobBuilder !== 'undefined'
|
|
? MozBlobBuilder : WebKitBlobBuilder;
|
|
var builder = new Builder();
|
|
for (var i = 0; i < parts.length; i += 1) {
|
|
builder.append(parts[i]);
|
|
}
|
|
return builder.getBlob(properties.type);
|
|
}
|
|
}
|
|
/**
|
|
* 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);
|
|
* ```
|
|
*
|
|
* @param blob
|
|
* @returns url
|
|
*/
|
|
function createObjectURL(blob) {
|
|
return (typeof URL !== 'undefined' ? URL : webkitURL).createObjectURL(blob);
|
|
}
|
|
/**
|
|
* 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);
|
|
* ```
|
|
*
|
|
* @param url
|
|
*/
|
|
function revokeObjectURL(url) {
|
|
return (typeof URL !== 'undefined' ? URL : webkitURL).revokeObjectURL(url);
|
|
}
|
|
/**
|
|
* Convert a `Blob` to a binary string.
|
|
*
|
|
* Example:
|
|
*
|
|
* ```js
|
|
* blobUtil.blobToBinaryString(blob).then(function (binaryString) {
|
|
* // success
|
|
* }).catch(function (err) {
|
|
* // error
|
|
* });
|
|
* ```
|
|
*
|
|
* @param blob
|
|
* @returns Promise that resolves with the binary string
|
|
*/
|
|
function blobToBinaryString(blob) {
|
|
return new Promise(function (resolve, reject) {
|
|
var reader = new FileReader();
|
|
var hasBinaryString = typeof reader.readAsBinaryString === 'function';
|
|
reader.onloadend = function () {
|
|
var result = reader.result || '';
|
|
if (hasBinaryString) {
|
|
return resolve(result);
|
|
}
|
|
resolve(arrayBufferToBinaryString(result));
|
|
};
|
|
reader.onerror = reject;
|
|
if (hasBinaryString) {
|
|
reader.readAsBinaryString(blob);
|
|
}
|
|
else {
|
|
reader.readAsArrayBuffer(blob);
|
|
}
|
|
});
|
|
}
|
|
/**
|
|
* Convert a base64-encoded string to a `Blob`.
|
|
*
|
|
* Example:
|
|
*
|
|
* ```js
|
|
* var blob = blobUtil.base64StringToBlob(base64String);
|
|
* ```
|
|
* @param base64 - base64-encoded string
|
|
* @param type - the content type (optional)
|
|
* @returns Blob
|
|
*/
|
|
function base64StringToBlob(base64, type) {
|
|
var parts = [binaryStringToArrayBuffer(atob(base64))];
|
|
return type ? createBlob(parts, { type: type }) : createBlob(parts);
|
|
}
|
|
/**
|
|
* Convert a binary string to a `Blob`.
|
|
*
|
|
* Example:
|
|
*
|
|
* ```js
|
|
* var blob = blobUtil.binaryStringToBlob(binaryString);
|
|
* ```
|
|
*
|
|
* @param binary - binary string
|
|
* @param type - the content type (optional)
|
|
* @returns Blob
|
|
*/
|
|
function binaryStringToBlob(binary, type) {
|
|
return base64StringToBlob(btoa(binary), type);
|
|
}
|
|
/**
|
|
* Convert a `Blob` to a binary string.
|
|
*
|
|
* Example:
|
|
*
|
|
* ```js
|
|
* blobUtil.blobToBase64String(blob).then(function (base64String) {
|
|
* // success
|
|
* }).catch(function (err) {
|
|
* // error
|
|
* });
|
|
* ```
|
|
*
|
|
* @param blob
|
|
* @returns Promise that resolves with the binary string
|
|
*/
|
|
function blobToBase64String(blob) {
|
|
return blobToBinaryString(blob).then(btoa);
|
|
}
|
|
/**
|
|
* Convert a data URL string
|
|
* (e.g. `'data:image/png;base64,iVBORw0KG...'`)
|
|
* to a `Blob`.
|
|
*
|
|
* Example:
|
|
*
|
|
* ```js
|
|
* var blob = blobUtil.dataURLToBlob(dataURL);
|
|
* ```
|
|
*
|
|
* @param dataURL - dataURL-encoded string
|
|
* @returns Blob
|
|
*/
|
|
function dataURLToBlob(dataURL) {
|
|
var type = dataURL.match(/data:([^;]+)/)[1];
|
|
var base64 = dataURL.replace(/^[^,]+,/, '');
|
|
var buff = binaryStringToArrayBuffer(atob(base64));
|
|
return createBlob([buff], { type: type });
|
|
}
|
|
/**
|
|
* Convert a `Blob` to a data URL string
|
|
* (e.g. `'data:image/png;base64,iVBORw0KG...'`).
|
|
*
|
|
* Example:
|
|
*
|
|
* ```js
|
|
* var dataURL = blobUtil.blobToDataURL(blob);
|
|
* ```
|
|
*
|
|
* @param blob
|
|
* @returns Promise that resolves with the data URL string
|
|
*/
|
|
function blobToDataURL(blob) {
|
|
return blobToBase64String(blob).then(function (base64String) {
|
|
return 'data:' + blob.type + ';base64,' + base64String;
|
|
});
|
|
}
|
|
/**
|
|
* 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
|
|
* });
|
|
* ```
|
|
*
|
|
* @param src - image src
|
|
* @param type - the content type (optional, defaults to 'image/png')
|
|
* @param crossOrigin - for CORS-enabled images, set this to
|
|
* 'Anonymous' to avoid "tainted canvas" errors
|
|
* @param 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
|
|
*/
|
|
function imgSrcToDataURL(src, type, crossOrigin, quality) {
|
|
type = type || 'image/png';
|
|
return loadImage(src, crossOrigin).then(imgToCanvas).then(function (canvas) {
|
|
return canvas.toDataURL(type, quality);
|
|
});
|
|
}
|
|
/**
|
|
* 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
|
|
* });
|
|
* ```
|
|
*
|
|
* @param canvas - HTMLCanvasElement
|
|
* @param type - the content type (optional, defaults to 'image/png')
|
|
* @param 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`
|
|
*/
|
|
function canvasToBlob(canvas, type, quality) {
|
|
if (typeof canvas.toBlob === 'function') {
|
|
return new Promise(function (resolve) {
|
|
canvas.toBlob(resolve, type, quality);
|
|
});
|
|
}
|
|
return Promise.resolve(dataURLToBlob(canvas.toDataURL(type, quality)));
|
|
}
|
|
/**
|
|
* 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
|
|
* });
|
|
* ```
|
|
*
|
|
* @param src - image src
|
|
* @param type - the content type (optional, defaults to 'image/png')
|
|
* @param crossOrigin - for CORS-enabled images, set this to
|
|
* 'Anonymous' to avoid "tainted canvas" errors
|
|
* @param 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`
|
|
*/
|
|
function imgSrcToBlob(src, type, crossOrigin, quality) {
|
|
type = type || 'image/png';
|
|
return loadImage(src, crossOrigin).then(imgToCanvas).then(function (canvas) {
|
|
return canvasToBlob(canvas, type, quality);
|
|
});
|
|
}
|
|
/**
|
|
* Convert an `ArrayBuffer` to a `Blob`.
|
|
*
|
|
* Example:
|
|
*
|
|
* ```js
|
|
* var blob = blobUtil.arrayBufferToBlob(arrayBuff, 'audio/mpeg');
|
|
* ```
|
|
*
|
|
* @param buffer
|
|
* @param type - the content type (optional)
|
|
* @returns Blob
|
|
*/
|
|
function arrayBufferToBlob(buffer, type) {
|
|
return createBlob([buffer], type);
|
|
}
|
|
/**
|
|
* Convert a `Blob` to an `ArrayBuffer`.
|
|
*
|
|
* Example:
|
|
*
|
|
* ```js
|
|
* blobUtil.blobToArrayBuffer(blob).then(function (arrayBuff) {
|
|
* // success
|
|
* }).catch(function (err) {
|
|
* // error
|
|
* });
|
|
* ```
|
|
*
|
|
* @param blob
|
|
* @returns Promise that resolves with the `ArrayBuffer`
|
|
*/
|
|
function blobToArrayBuffer(blob) {
|
|
return new Promise(function (resolve, reject) {
|
|
var reader = new FileReader();
|
|
reader.onloadend = function () {
|
|
var result = reader.result || new ArrayBuffer(0);
|
|
resolve(result);
|
|
};
|
|
reader.onerror = reject;
|
|
reader.readAsArrayBuffer(blob);
|
|
});
|
|
}
|
|
/**
|
|
* Convert an `ArrayBuffer` to a binary string.
|
|
*
|
|
* Example:
|
|
*
|
|
* ```js
|
|
* var myString = blobUtil.arrayBufferToBinaryString(arrayBuff)
|
|
* ```
|
|
*
|
|
* @param buffer - array buffer
|
|
* @returns binary string
|
|
*/
|
|
function arrayBufferToBinaryString(buffer) {
|
|
var binary = '';
|
|
var bytes = new Uint8Array(buffer);
|
|
var length = bytes.byteLength;
|
|
var i = -1;
|
|
while (++i < length) {
|
|
binary += String.fromCharCode(bytes[i]);
|
|
}
|
|
return binary;
|
|
}
|
|
/**
|
|
* Convert a binary string to an `ArrayBuffer`.
|
|
*
|
|
* ```js
|
|
* var myBuffer = blobUtil.binaryStringToArrayBuffer(binaryString)
|
|
* ```
|
|
*
|
|
* @param binary - binary string
|
|
* @returns array buffer
|
|
*/
|
|
function binaryStringToArrayBuffer(binary) {
|
|
var length = binary.length;
|
|
var buf = new ArrayBuffer(length);
|
|
var arr = new Uint8Array(buf);
|
|
var i = -1;
|
|
while (++i < length) {
|
|
arr[i] = binary.charCodeAt(i);
|
|
}
|
|
return buf;
|
|
}
|
|
|
|
exports.createBlob = createBlob;
|
|
exports.createObjectURL = createObjectURL;
|
|
exports.revokeObjectURL = revokeObjectURL;
|
|
exports.blobToBinaryString = blobToBinaryString;
|
|
exports.base64StringToBlob = base64StringToBlob;
|
|
exports.binaryStringToBlob = binaryStringToBlob;
|
|
exports.blobToBase64String = blobToBase64String;
|
|
exports.dataURLToBlob = dataURLToBlob;
|
|
exports.blobToDataURL = blobToDataURL;
|
|
exports.imgSrcToDataURL = imgSrcToDataURL;
|
|
exports.canvasToBlob = canvasToBlob;
|
|
exports.imgSrcToBlob = imgSrcToBlob;
|
|
exports.arrayBufferToBlob = arrayBufferToBlob;
|
|
exports.blobToArrayBuffer = blobToArrayBuffer;
|
|
exports.arrayBufferToBinaryString = arrayBufferToBinaryString;
|
|
exports.binaryStringToArrayBuffer = binaryStringToArrayBuffer;
|
|
|
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
|
})));
|