(#1) - fix cross-origin images

.gitignore

@@ -6,3 +6,5 @@ test/test-bundle.js
 npm-debug.log
 dist
 api.md
+doc/global.html
+doc/index.html

README.md

@@ -199,7 +199,7 @@ to a <code>Blob</code>. Returns a Promise.
 
 **Returns**: `Promise` - Promise that resolves with the <code>Blob</code>  
 <a name="imgSrcToDataURL"></a>
-###imgSrcToDataURL(src, type)
+###imgSrcToDataURL(src, type, crossOrigin)
 Convert an image's <code>src</code> URL to a data URL by loading the image and painting
 it to a <code>canvas</code>. Returns a Promise.
 
@@ -210,6 +210,8 @@ will only paint the first frame of an animated GIF.
 
 - 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  
 
 **Returns**: `Promise` - Promise that resolves with the data URL string  
 <a name="canvasToBlob"></a>
@@ -223,7 +225,7 @@ Convert a <code>canvas</code> to a <code>Blob</code>. Returns a Promise.
 
 **Returns**: `Promise` - Promise that resolves with the <code>Blob</code>  
 <a name="imgSrcToBlob"></a>
-###imgSrcToBlob(src, type)
+###imgSrcToBlob(src, type, crossOrigin)
 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>. Returns a Promise.
 
@@ -234,6 +236,8 @@ will only paint the first frame of an animated GIF.
 
 - 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  
 
 **Returns**: `Promise` - Promise that resolves with the <code>Blob</code>  
 <a name="arrayBufferToBlob"></a>
@@ -277,6 +281,11 @@ or in markdown format as `api.md`
 
 The playground is just `jsdoc` with some extra text containing Kirby and the code samples and such.
 
+So unfortunately you will need to do a manual diff to get the docs up to date. You'll need to diff:
+
+* `api.md` to `README.md`
+* `index.html` to `doc/global.html`
+
 Testing the library
 ----
 

dist/blob-util.js

@@ -39,10 +39,12 @@ function arrayBufferToBinaryString(buffer) {
 
 // doesn't download the image more than once, because
 // browsers aren't dumb. uses the cache
-function loadImage(src) {
+function loadImage(src, crossOrigin) {
   return new Promise(function (resolve, reject) {
     var img = new Image();
-
+    if (crossOrigin) {
+      img.crossOrigin = crossOrigin;
+    }
     img.onload = function () {
       resolve(img);
     };
@@ -202,12 +204,14 @@ function dataURLToBlob(dataURL) {
  *
  * @param {string} src
  * @param {string|undefined} type - the content type (optional, defaults to 'image/png')
+ * @param {string|undefined} crossOrigin - for CORS-enabled images, set this to
+ *                                         'Anonymous' to avoid "tainted canvas" errors
  * @returns {Promise} Promise that resolves with the data URL string
  */
-function imgSrcToDataURL(src, type) {
+function imgSrcToDataURL(src, type, crossOrigin) {
   type = type || 'image/png';
 
-  return loadImage(src).then(function (img) {
+  return loadImage(src, crossOrigin).then(function (img) {
     return imgToCanvas(img);
   }).then(function (canvas) {
     return canvas.toDataURL(type);
@@ -240,12 +244,14 @@ function canvasToBlob(canvas, type) {
  *
  * @param {string} src
  * @param {string|undefined} type - the content type (optional, defaults to 'image/png')
+ * @param {string|undefined} crossOrigin - for CORS-enabled images, set this to
+ *                                         'Anonymous' to avoid "tainted canvas" errors
  * @returns {Promise} Promise that resolves with the <code>Blob</code>
  */
-function imgSrcToBlob(src, type) {
+function imgSrcToBlob(src, type, crossOrigin) {
   type = type || 'image/png';
 
-  return loadImage(src).then(function (img) {
+  return loadImage(src, crossOrigin).then(function (img) {
     return imgToCanvas(img);
   }).then(function (canvas) {
     return canvasToBlob(canvas, type);
@@ -291,6 +297,7 @@ module.exports = {
   arrayBufferToBlob  : arrayBufferToBlob,
   blobToArrayBuffer  : blobToArrayBuffer
 };
+
 },{"./utils":2,"blob":3}],2:[function(require,module,exports){
 var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {};'use strict';
 

doc/index.js.html

@@ -66,10 +66,12 @@ function arrayBufferToBinaryString(buffer) {
 
 // doesn't download the image more than once, because
 // browsers aren't dumb. uses the cache
-function loadImage(src) {
+function loadImage(src, crossOrigin) {
   return new Promise(function (resolve, reject) {
     var img = new Image();
-
+    if (crossOrigin) {
+      img.crossOrigin = crossOrigin;
+    }
     img.onload = function () {
       resolve(img);
     };
@@ -229,12 +231,14 @@ function dataURLToBlob(dataURL) {
  *
  * @param {string} src
  * @param {string|undefined} type - the content type (optional, defaults to 'image/png')
+ * @param {string|undefined} crossOrigin - for CORS-enabled images, set this to
+ *                                         'Anonymous' to avoid "tainted canvas" errors
  * @returns {Promise} Promise that resolves with the data URL string
  */
-function imgSrcToDataURL(src, type) {
+function imgSrcToDataURL(src, type, crossOrigin) {
   type = type || 'image/png';
 
-  return loadImage(src).then(function (img) {
+  return loadImage(src, crossOrigin).then(function (img) {
     return imgToCanvas(img);
   }).then(function (canvas) {
     return canvas.toDataURL(type);
@@ -267,12 +271,14 @@ function canvasToBlob(canvas, type) {
  *
  * @param {string} src
  * @param {string|undefined} type - the content type (optional, defaults to 'image/png')
+ * @param {string|undefined} crossOrigin - for CORS-enabled images, set this to
+ *                                         'Anonymous' to avoid "tainted canvas" errors
  * @returns {Promise} Promise that resolves with the <code>Blob</code>
  */
-function imgSrcToBlob(src, type) {
+function imgSrcToBlob(src, type, crossOrigin) {
   type = type || 'image/png';
 
-  return loadImage(src).then(function (img) {
+  return loadImage(src, crossOrigin).then(function (img) {
     return imgToCanvas(img);
   }).then(function (canvas) {
     return canvasToBlob(canvas, type);
@@ -317,7 +323,8 @@ module.exports = {
   blobToBinaryString : blobToBinaryString,
   arrayBufferToBlob  : arrayBufferToBlob,
   blobToArrayBuffer  : blobToArrayBuffer
-};</code></pre>
+};
+</code></pre>
         </article>
     </section>
 
@@ -333,7 +340,7 @@ module.exports = {
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha10</a> on Sat Oct 25 2014 13:44:58 GMT-0400 (EDT)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha10</a> on Tue Nov 04 2014 15:42:40 GMT-0500 (EST)
 </footer>
 
 <script> prettyPrint(); </script>

index.html

@@ -1769,7 +1769,7 @@ to a <code>Blob</code>. Returns a Promise.
             
 <dt>
     
-        <h4 class="name" id="imgSrcToBlob"><span class="type-signature"></span>imgSrcToBlob<span class="signature">(src, type)</span><span class="type-signature"> &rarr; {Promise}</span></h4>
+        <h4 class="name" id="imgSrcToBlob"><span class="type-signature"></span>imgSrcToBlob<span class="signature">(src, type, crossOrigin)</span><span class="type-signature"> &rarr; {Promise}</span></h4>
 
         
     
@@ -1864,6 +1864,33 @@ will only paint the first frame of an animated GIF.
         </tr>
 
     
+
+        <tr>
+
+                <td class="name"><code>crossOrigin</code></td>
+
+
+            <td class="type">
+
+
+<span class="param-type">string</span>
+|
+
+<span class="param-type">undefined</span>
+
+
+
+            </td>
+
+
+
+
+
+            <td class="description last">for CORS-enabled images, set this to
+                                        'Anonymous' to avoid "tainted canvas" errors</td>
+        </tr>
+
+
     </tbody>
 </table>
     
@@ -1951,7 +1978,7 @@ will only paint the first frame of an animated GIF.
             
 <dt>
     
-        <h4 class="name" id="imgSrcToDataURL"><span class="type-signature"></span>imgSrcToDataURL<span class="signature">(src, type)</span><span class="type-signature"> &rarr; {Promise}</span></h4>
+        <h4 class="name" id="imgSrcToDataURL"><span class="type-signature"></span>imgSrcToDataURL<span class="signature">(src, type, crossOrigin)</span><span class="type-signature"> &rarr; {Promise}</span></h4>
 
         
     
@@ -2046,6 +2073,33 @@ will only paint the first frame of an animated GIF.
         </tr>
 
     
+
+        <tr>
+
+                <td class="name"><code>crossOrigin</code></td>
+
+
+            <td class="type">
+
+
+<span class="param-type">string</span>
+|
+
+<span class="param-type">undefined</span>
+
+
+
+            </td>
+
+
+
+
+
+            <td class="description last">for CORS-enabled images, set this to
+                                        'Anonymous' to avoid "tainted canvas" errors</td>
+        </tr>
+
+
     </tbody>
 </table>
     

lib/index.js

@@ -38,10 +38,12 @@ function arrayBufferToBinaryString(buffer) {
 
 // doesn't download the image more than once, because
 // browsers aren't dumb. uses the cache
-function loadImage(src) {
+function loadImage(src, crossOrigin) {
   return new Promise(function (resolve, reject) {
     var img = new Image();
-
+    if (crossOrigin) {
+      img.crossOrigin = crossOrigin;
+    }
     img.onload = function () {
       resolve(img);
     };
@@ -201,12 +203,14 @@ function dataURLToBlob(dataURL) {
  *
  * @param {string} src
  * @param {string|undefined} type - the content type (optional, defaults to 'image/png')
+ * @param {string|undefined} crossOrigin - for CORS-enabled images, set this to
+ *                                         'Anonymous' to avoid "tainted canvas" errors
  * @returns {Promise} Promise that resolves with the data URL string
  */
-function imgSrcToDataURL(src, type) {
+function imgSrcToDataURL(src, type, crossOrigin) {
   type = type || 'image/png';
 
-  return loadImage(src).then(function (img) {
+  return loadImage(src, crossOrigin).then(function (img) {
     return imgToCanvas(img);
   }).then(function (canvas) {
     return canvas.toDataURL(type);
@@ -239,12 +243,14 @@ function canvasToBlob(canvas, type) {
  *
  * @param {string} src
  * @param {string|undefined} type - the content type (optional, defaults to 'image/png')
+ * @param {string|undefined} crossOrigin - for CORS-enabled images, set this to
+ *                                         'Anonymous' to avoid "tainted canvas" errors
  * @returns {Promise} Promise that resolves with the <code>Blob</code>
  */
-function imgSrcToBlob(src, type) {
+function imgSrcToBlob(src, type, crossOrigin) {
   type = type || 'image/png';
 
-  return loadImage(src).then(function (img) {
+  return loadImage(src, crossOrigin).then(function (img) {
     return imgToCanvas(img);
   }).then(function (canvas) {
     return canvasToBlob(canvas, type);
@@ -289,4 +295,4 @@ module.exports = {
   blobToBinaryString : blobToBinaryString,
   arrayBufferToBlob  : arrayBufferToBlob,
   blobToArrayBuffer  : blobToArrayBuffer
-};
+};