From 49daf341e1d17ef3146aa0670c6a264e8113fbe2 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Tue, 4 Nov 2014 15:47:43 -0500 Subject: [PATCH] (#1) - fix cross-origin images --- .gitignore | 2 ++ README.md | 13 ++++++++-- dist/blob-util.js | 19 +++++++++----- dist/blob-util.min.js | 2 +- doc/index.js.html | 23 +++++++++++------ index.html | 58 +++++++++++++++++++++++++++++++++++++++++-- lib/index.js | 20 +++++++++------ 7 files changed, 111 insertions(+), 26 deletions(-) diff --git a/.gitignore b/.gitignore index c110f9d..8ce7441 100644 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,5 @@ test/test-bundle.js npm-debug.log dist api.md +doc/global.html +doc/index.html diff --git a/README.md b/README.md index 10817d3..a6e49bb 100644 --- a/README.md +++ b/README.md @@ -199,7 +199,7 @@ to a Blob. Returns a Promise. **Returns**: `Promise` - Promise that resolves with the Blob -###imgSrcToDataURL(src, type) +###imgSrcToDataURL(src, type, crossOrigin) Convert an image's src URL to a data URL by loading the image and painting it to a canvas. 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 @@ -223,7 +225,7 @@ Convert a canvas to a Blob. Returns a Promise. **Returns**: `Promise` - Promise that resolves with the Blob -###imgSrcToBlob(src, type) +###imgSrcToBlob(src, type, crossOrigin) Convert an image's src URL to a Blob by loading the image and painting it to a canvas. 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 Blob @@ -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 ---- diff --git a/dist/blob-util.js b/dist/blob-util.js index 12605a5..1dd7adc 100644 --- a/dist/blob-util.js +++ b/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 Blob */ -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'; diff --git a/dist/blob-util.min.js b/dist/blob-util.min.js index 669dc8a..6331b9a 100644 --- a/dist/blob-util.min.js +++ b/dist/blob-util.min.js @@ -1 +1 @@ -!function(e){"object"==typeof exports?module.exports=e():"function"==typeof define&&define.amd?define(e):"undefined"!=typeof window?window.blobUtil=e():"undefined"!=typeof global?global.blobUtil=e():"undefined"!=typeof self&&(self.blobUtil=e())}(function(){return function e(t,n,r){function o(u,a){if(!n[u]){if(!t[u]){var s="function"==typeof require&&require;if(!a&&s)return s(u,!0);if(i)return i(u,!0);throw new Error("Cannot find module '"+u+"'")}var f=n[u]={exports:{}};t[u][0].call(f.exports,function(e){var n=t[u][1][e];return o(n?n:e)},f,f.exports,e,t,n,r)}return n[u].exports}for(var i="function"==typeof require&&require,u=0;uBlob</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 -}; +}; + @@ -333,7 +340,7 @@ module.exports = {
diff --git a/index.html b/index.html index 7fc5eb5..7ae4b65 100644 --- a/index.html +++ b/index.html @@ -1769,7 +1769,7 @@ to a Blob. Returns a Promise.
-

imgSrcToBlob(src, type) → {Promise}

+

imgSrcToBlob(src, type, crossOrigin) → {Promise}

@@ -1864,6 +1864,33 @@ will only paint the first frame of an animated GIF. + + + + crossOrigin + + + + + +string +| + +undefined + + + + + + + + + + for CORS-enabled images, set this to + 'Anonymous' to avoid "tainted canvas" errors + + + @@ -1951,7 +1978,7 @@ will only paint the first frame of an animated GIF.
-

imgSrcToDataURL(src, type) → {Promise}

+

imgSrcToDataURL(src, type, crossOrigin) → {Promise}

@@ -2046,6 +2073,33 @@ will only paint the first frame of an animated GIF. + + + + crossOrigin + + + + + +string +| + +undefined + + + + + + + + + + for CORS-enabled images, set this to + 'Anonymous' to avoid "tainted canvas" errors + + + diff --git a/lib/index.js b/lib/index.js index fc396ab..754c687 100644 --- a/lib/index.js +++ b/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 Blob */ -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 -}; \ No newline at end of file +};