diff --git a/src/Feature.js b/src/Feature.js index a0cda97..44002c0 100644 --- a/src/Feature.js +++ b/src/Feature.js @@ -59,6 +59,10 @@ const testBase64 = (document: Document, src: string): Promise => { }); }; +const testCORS = () => { + return typeof new Image().crossOrigin !== 'undefined'; +}; + const testSVG = document => { const img = new Image(); const canvas = document.createElement('canvas'); @@ -145,6 +149,13 @@ const FEATURES = { const value = testForeignObject(document); Object.defineProperty(FEATURES, 'SUPPORT_FOREIGNOBJECT_DRAWING', {value}); return value; + }, + // $FlowFixMe - get/set properties not yet supported + get SUPPORT_CORS_IMAGES() { + 'use strict'; + const value = testCORS(); + Object.defineProperty(FEATURES, 'SUPPORT_CORS_IMAGES', {value}); + return value; } }; diff --git a/src/ImageLoader.js b/src/ImageLoader.js index 1bc69df..016676d 100644 --- a/src/ImageLoader.js +++ b/src/ImageLoader.js @@ -35,7 +35,7 @@ export default class ImageLoader { if (isSVG(src)) { if (this.options.allowTaint === true || FEATURES.SUPPORT_SVG_DRAWING) { - return this.addImage(src, src); + return this.addImage(src, src, false); } } else { if ( @@ -43,9 +43,13 @@ export default class ImageLoader { isInlineBase64Image(src) || this.isSameOrigin(src) ) { - return this.addImage(src, src); - } else if (typeof this.options.proxy === 'string' && !this.isSameOrigin(src)) { - // TODO proxy + return this.addImage(src, src, false); + } else if (!this.isSameOrigin(src)) { + if (typeof this.options.proxy === 'string') { + // TODO proxy + } else if (this.options.useCORS === true && FEATURES.SUPPORT_CORS_IMAGES) { + return this.addImage(src, src, true); + } } } } @@ -102,7 +106,7 @@ export default class ImageLoader { return typeof this.cache[key] !== 'undefined'; } - addImage(key: string, src: string): string { + addImage(key: string, src: string, useCORS: boolean): string { if (__DEV__) { this.logger.log(`Added image ${key.substring(0, 256)}`); } @@ -112,7 +116,7 @@ export default class ImageLoader { const img = new Image(); img.onload = () => resolve(img); //ios safari 10.3 taints canvas with data urls unless crossOrigin is set to anonymous - if (!supportsDataImages) { + if (!supportsDataImages || useCORS) { img.crossOrigin = 'anonymous'; } @@ -127,7 +131,12 @@ export default class ImageLoader { if (this.options.imageTimeout) { const timeout = this.options.imageTimeout; setTimeout( - () => reject(__DEV__ ? `Timed out (${timeout}ms) fetching ${src}` : ''), + () => + reject( + __DEV__ + ? `Timed out (${timeout}ms) fetching ${src.substring(0, 256)}` + : '' + ), timeout ); }