UNPKG

11.9 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="utf-8">
5 <title>JSDoc: Source: index.js</title>
6
7 <script src="scripts/prettify/prettify.js"> </script>
8 <script src="scripts/prettify/lang-css.js"> </script>
9 <!--[if lt IE 9]>
10 <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
11 <![endif]-->
12 <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
13 <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
14</head>
15
16<body>
17
18<div id="main">
19
20 <h1 class="page-title">Source: index.js</h1>
21
22
23
24
25
26
27 <section>
28 <article>
29 <pre class="prettyprint source linenums"><code>'use strict';
30
31/* jshint -W079 */
32var Blob = require('blob');
33var Promise = require('pouchdb-promise');
34
35//
36// PRIVATE
37//
38
39// From http://stackoverflow.com/questions/14967647/ (continues on next line)
40// encode-decode-image-with-base64-breaks-image (2013-04-21)
41function binaryStringToArrayBuffer(binary) {
42 var length = binary.length;
43 var buf = new ArrayBuffer(length);
44 var arr = new Uint8Array(buf);
45 var i = -1;
46 while (++i &lt; length) {
47 arr[i] = binary.charCodeAt(i);
48 }
49 return buf;
50}
51
52// Can't find original post, but this is close
53// http://stackoverflow.com/questions/6965107/ (continues on next line)
54// converting-between-strings-and-arraybuffers
55function arrayBufferToBinaryString(buffer) {
56 var binary = '';
57 var bytes = new Uint8Array(buffer);
58 var length = bytes.byteLength;
59 var i = -1;
60 while (++i &lt; length) {
61 binary += String.fromCharCode(bytes[i]);
62 }
63 return binary;
64}
65
66// doesn't download the image more than once, because
67// browsers aren't dumb. uses the cache
68function loadImage(src, crossOrigin) {
69 return new Promise(function (resolve, reject) {
70 var img = new Image();
71 if (crossOrigin) {
72 img.crossOrigin = crossOrigin;
73 }
74 img.onload = function () {
75 resolve(img);
76 };
77 img.onerror = reject;
78 img.src = src;
79 });
80}
81
82function imgToCanvas(img) {
83 var canvas = document.createElement('canvas');
84
85 canvas.width = img.width;
86 canvas.height = img.height;
87
88 // copy the image contents to the canvas
89 var context = canvas.getContext('2d');
90 context.drawImage(
91 img,
92 0, 0,
93 img.width, img.height,
94 0, 0,
95 img.width, img.height);
96
97 return canvas;
98}
99
100//
101// PUBLIC
102//
103
104/**
105 * Shim for
106 * [new Blob()]{@link https://developer.mozilla.org/en-US/docs/Web/API/Blob.Blob}
107 * to support
108 * [older browsers that use the deprecated &lt;code>BlobBuilder&lt;/code> API]{@link http://caniuse.com/blob}.
109 *
110 * @param {Array} parts - content of the &lt;code>Blob&lt;/code>
111 * @param {Object} options - usually just &lt;code>{type: myContentType}&lt;/code>
112 * @returns {Blob}
113 */
114function createBlob(parts, options) {
115 options = options || {};
116 if (typeof options === 'string') {
117 options = {type: options}; // do you a solid here
118 }
119 return new Blob(parts, options);
120}
121
122/**
123 * Shim for
124 * [URL.createObjectURL()]{@link https://developer.mozilla.org/en-US/docs/Web/API/URL.createObjectURL}
125 * to support browsers that only have the prefixed
126 * &lt;code>webkitURL&lt;/code> (e.g. Android &lt;4.4).
127 * @param {Blob} blob
128 * @returns {string} url
129 */
130function createObjectURL(blob) {
131 return (window.URL || window.webkitURL).createObjectURL(blob);
132}
133
134/**
135 * Shim for
136 * [URL.revokeObjectURL()]{@link https://developer.mozilla.org/en-US/docs/Web/API/URL.revokeObjectURL}
137 * to support browsers that only have the prefixed
138 * &lt;code>webkitURL&lt;/code> (e.g. Android &lt;4.4).
139 * @param {string} url
140 */
141function revokeObjectURL(url) {
142 return (window.URL || window.webkitURL).revokeObjectURL(url);
143}
144
145/**
146 * Convert a &lt;code>Blob&lt;/code> to a binary string. Returns a Promise.
147 *
148 * @param {Blob} blob
149 * @returns {Promise} Promise that resolves with the binary string
150 */
151function blobToBinaryString(blob) {
152 return new Promise(function (resolve, reject) {
153 var reader = new FileReader();
154 var hasBinaryString = typeof reader.readAsBinaryString === 'function';
155 reader.onloadend = function (e) {
156 var result = e.target.result || '';
157 if (hasBinaryString) {
158 return resolve(result);
159 }
160 resolve(arrayBufferToBinaryString(result));
161 };
162 reader.onerror = reject;
163 if (hasBinaryString) {
164 reader.readAsBinaryString(blob);
165 } else {
166 reader.readAsArrayBuffer(blob);
167 }
168 });
169}
170
171/**
172 * Convert a base64-encoded string to a &lt;code>Blob&lt;/code>. Returns a Promise.
173 * @param {string} base64
174 * @param {string|undefined} type - the content type (optional)
175 * @returns {Promise} Promise that resolves with the &lt;code>Blob&lt;/code>
176 */
177function base64StringToBlob(base64, type) {
178 return Promise.resolve().then(function () {
179 var parts = [binaryStringToArrayBuffer(atob(base64))];
180 return type ? createBlob(parts, {type: type}) : createBlob(parts);
181 });
182}
183
184/**
185 * Convert a binary string to a &lt;code>Blob&lt;/code>. Returns a Promise.
186 * @param {string} binary
187 * @param {string|undefined} type - the content type (optional)
188 * @returns {Promise} Promise that resolves with the &lt;code>Blob&lt;/code>
189 */
190function binaryStringToBlob(binary, type) {
191 return Promise.resolve().then(function () {
192 return base64StringToBlob(btoa(binary), type);
193 });
194}
195
196/**
197 * Convert a &lt;code>Blob&lt;/code> to a binary string. Returns a Promise.
198 * @param {Blob} blob
199 * @returns {Promise} Promise that resolves with the binary string
200 */
201function blobToBase64String(blob) {
202 return blobToBinaryString(blob).then(function (binary) {
203 return btoa(binary);
204 });
205}
206
207/**
208 * Convert a data URL string
209 * (e.g. &lt;code>'data:image/png;base64,iVBORw0KG...'&lt;/code>)
210 * to a &lt;code>Blob&lt;/code>. Returns a Promise.
211 * @param {string} dataURL
212 * @returns {Promise} Promise that resolves with the &lt;code>Blob&lt;/code>
213 */
214function dataURLToBlob(dataURL) {
215 return Promise.resolve().then(function () {
216 var type = dataURL.match(/data:([^;]+)/)[1];
217 var base64 = dataURL.replace(/^[^,]+,/, '');
218
219 var buff = binaryStringToArrayBuffer(atob(base64));
220 return createBlob([buff], {type: type});
221 });
222}
223
224/**
225 * Convert an image's &lt;code>src&lt;/code> URL to a data URL by loading the image and painting
226 * it to a &lt;code>canvas&lt;/code>. Returns a Promise.
227 *
228 * &lt;p/>Note: this will coerce the image to the desired content type, and it
229 * will only paint the first frame of an animated GIF.
230 *
231 * @param {string} src
232 * @param {string|undefined} type - the content type (optional, defaults to 'image/png')
233 * @param {string|undefined} crossOrigin - for CORS-enabled images, set this to
234 * 'Anonymous' to avoid "tainted canvas" errors
235 * @param {number|undefined} quality - a number between 0 and 1 indicating image quality
236 * if the requested type is 'image/jpeg' or 'image/webp'
237 * @returns {Promise} Promise that resolves with the data URL string
238 */
239function imgSrcToDataURL(src, type, crossOrigin, quality) {
240 type = type || 'image/png';
241
242 return loadImage(src, crossOrigin).then(function (img) {
243 return imgToCanvas(img);
244 }).then(function (canvas) {
245 return canvas.toDataURL(type, quality);
246 });
247}
248
249/**
250 * Convert a &lt;code>canvas&lt;/code> to a &lt;code>Blob&lt;/code>. Returns a Promise.
251 * @param {string} canvas
252 * @param {string|undefined} type - the content type (optional, defaults to 'image/png')
253 * @param {number|undefined} quality - a number between 0 and 1 indicating image quality
254 * if the requested type is 'image/jpeg' or 'image/webp'
255 * @returns {Promise} Promise that resolves with the &lt;code>Blob&lt;/code>
256 */
257function canvasToBlob(canvas, type, quality) {
258 return Promise.resolve().then(function () {
259 if (typeof canvas.toBlob === 'function') {
260 return new Promise(function (resolve) {
261 canvas.toBlob(resolve, type, quality);
262 });
263 }
264 return dataURLToBlob(canvas.toDataURL(type, quality));
265 });
266}
267
268/**
269 * Convert an image's &lt;code>src&lt;/code> URL to a &lt;code>Blob&lt;/code> by loading the image and painting
270 * it to a &lt;code>canvas&lt;/code>. Returns a Promise.
271 *
272 * &lt;p/>Note: this will coerce the image to the desired content type, and it
273 * will only paint the first frame of an animated GIF.
274 *
275 * @param {string} src
276 * @param {string|undefined} type - the content type (optional, defaults to 'image/png')
277 * @param {string|undefined} crossOrigin - for CORS-enabled images, set this to
278 * 'Anonymous' to avoid "tainted canvas" errors
279 * @param {number|undefined} quality - a number between 0 and 1 indicating image quality
280 * if the requested type is 'image/jpeg' or 'image/webp'
281 * @returns {Promise} Promise that resolves with the &lt;code>Blob&lt;/code>
282 */
283function imgSrcToBlob(src, type, crossOrigin, quality) {
284 type = type || 'image/png';
285
286 return loadImage(src, crossOrigin).then(function (img) {
287 return imgToCanvas(img);
288 }).then(function (canvas) {
289 return canvasToBlob(canvas, type, quality);
290 });
291}
292
293/**
294 * Convert an &lt;code>ArrayBuffer&lt;/code> to a &lt;code>Blob&lt;/code>. Returns a Promise.
295 *
296 * @param {ArrayBuffer} buffer
297 * @param {string|undefined} type - the content type (optional)
298 * @returns {Promise} Promise that resolves with the &lt;code>Blob&lt;/code>
299 */
300function arrayBufferToBlob(buffer, type) {
301 return Promise.resolve().then(function () {
302 return createBlob([buffer], type);
303 });
304}
305
306/**
307 * Convert a &lt;code>Blob&lt;/code> to an &lt;code>ArrayBuffer&lt;/code>. Returns a Promise.
308 * @param {Blob} blob
309 * @returns {Promise} Promise that resolves with the &lt;code>ArrayBuffer&lt;/code>
310 */
311function blobToArrayBuffer(blob) {
312 return new Promise(function (resolve, reject) {
313 var reader = new FileReader();
314 reader.onloadend = function (e) {
315 var result = e.target.result || new ArrayBuffer(0);
316 resolve(result);
317 };
318 reader.onerror = reject;
319 reader.readAsArrayBuffer(blob);
320 });
321}
322
323module.exports = {
324 createBlob : createBlob,
325 createObjectURL : createObjectURL,
326 revokeObjectURL : revokeObjectURL,
327 imgSrcToBlob : imgSrcToBlob,
328 imgSrcToDataURL : imgSrcToDataURL,
329 canvasToBlob : canvasToBlob,
330 dataURLToBlob : dataURLToBlob,
331 blobToBase64String : blobToBase64String,
332 base64StringToBlob : base64StringToBlob,
333 binaryStringToBlob : binaryStringToBlob,
334 blobToBinaryString : blobToBinaryString,
335 arrayBufferToBlob : arrayBufferToBlob,
336 blobToArrayBuffer : blobToArrayBuffer
337};
338</code></pre>
339 </article>
340 </section>
341
342
343
344
345</div>
346
347<nav>
348 <h2><a href="index.html">Home</a></h2><h3>Global</h3><ul><li><a href="global.html#arrayBufferToBlob">arrayBufferToBlob</a></li><li><a href="global.html#base64StringToBlob">base64StringToBlob</a></li><li><a href="global.html#binaryStringToBlob">binaryStringToBlob</a></li><li><a href="global.html#blobToArrayBuffer">blobToArrayBuffer</a></li><li><a href="global.html#blobToBase64String">blobToBase64String</a></li><li><a href="global.html#blobToBinaryString">blobToBinaryString</a></li><li><a href="global.html#canvasToBlob">canvasToBlob</a></li><li><a href="global.html#createBlob">createBlob</a></li><li><a href="global.html#createObjectURL">createObjectURL</a></li><li><a href="global.html#dataURLToBlob">dataURLToBlob</a></li><li><a href="global.html#imgSrcToBlob">imgSrcToBlob</a></li><li><a href="global.html#imgSrcToDataURL">imgSrcToDataURL</a></li><li><a href="global.html#revokeObjectURL">revokeObjectURL</a></li></ul>
349</nav>
350
351<br class="clear">
352
353<footer>
354 Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-beta3</a> on Sat Jan 16 2016 14:43:19 GMT-0500 (EST)
355</footer>
356
357<script> prettyPrint(); </script>
358<script src="scripts/linenumber.js"> </script>
359</body>
360</html>