Capture screenshots while running karma tests

src/Clone.js

@@ -37,7 +37,7 @@ export class DocumentCloner {
                     if (backgroundImage.method === 'url') {
                         return this.imageLoader
                             .inlineImage(backgroundImage.args[0])
-                            .then(src => (src ? `url("${src}")` : 'none'));
+                            .then(img => (img ? `url("${img.src}")` : 'none'));
                     }
                     return Promise.resolve(
                         `${backgroundImage.prefix}${backgroundImage.method}(${backgroundImage.args.join(
@@ -54,9 +54,12 @@ export class DocumentCloner {
             });
 
             if (node instanceof HTMLImageElement) {
-                this.imageLoader.inlineImage(node.src).then(src => {
-                    if (src && node instanceof HTMLImageElement) {
-                        node.src = src;
+                this.imageLoader.inlineImage(node.src).then(img => {
+                    if (img && node instanceof HTMLImageElement && node.parentNode) {
+                        node.parentNode.replaceChild(
+                            copyCSSStyles(node.style, img.cloneNode(false)),
+                            node
+                        );
                     }
                 });
             }

src/ImageLoader.js

@@ -50,9 +50,9 @@ export default class ImageLoader<T> {
         }
     }
 
-    inlineImage(src: string): Promise<string> {
+    inlineImage(src: string): Promise<Image> {
         if (isInlineImage(src)) {
-            return Promise.resolve(src);
+            return loadImage(src, this.options.imageTimeout || 0);
         }
         if (this.hasImageInCache(src)) {
             return this.cache[src];
@@ -61,7 +61,7 @@ export default class ImageLoader<T> {
         return this.xhrImage(src);
     }
 
-    xhrImage(src: string): Promise<string> {
+    xhrImage(src: string): Promise<Image> {
         this.cache[src] = new Promise((resolve, reject) => {
             const xhr = new XMLHttpRequest();
             xhr.onreadystatechange = () => {
@@ -87,7 +87,7 @@ export default class ImageLoader<T> {
             }
             xhr.open('GET', src, true);
             xhr.send();
-        });
+        }).then(src => loadImage(src, this.options.imageTimeout || 0));
 
         return this.cache[src];
     }
@@ -196,3 +196,24 @@ const isInlineBase64Image = (src: string): boolean => INLINE_BASE64.test(src);
 
 const isSVG = (src: string): boolean =>
     src.substr(-3).toLowerCase() === 'svg' || INLINE_SVG.test(src);
+
+const loadImage = (src: string, timeout: number) => {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => resolve(img);
+        img.onerror = reject;
+        img.src = src;
+        if (img.complete === true) {
+            // Inline XML images may fail to parse, throwing an Error later on
+            setTimeout(() => {
+                resolve(img);
+            }, 500);
+        }
+        if (timeout) {
+            setTimeout(
+                () => reject(__DEV__ ? `Timed out (${timeout}ms) loading image` : ''),
+                timeout
+            );
+        }
+    });
+};

src/Util.js

@@ -3,7 +3,7 @@
 
 export const contains = (bit: number, value: number): boolean => (bit & value) !== 0;
 
-export const copyCSSStyles = (style: CSSStyleDeclaration, target: HTMLElement): void => {
+export const copyCSSStyles = (style: CSSStyleDeclaration, target: HTMLElement): HTMLElement => {
     // Edge does not provide value for cssText
     for (let i = style.length - 1; i >= 0; i--) {
         const property = style.item(i);
@@ -12,6 +12,7 @@ export const copyCSSStyles = (style: CSSStyleDeclaration, target: HTMLElement):
             target.style.setProperty(property, style.getPropertyValue(property));
         }
     }
+    return target;
 };
 
 export const SMALL_IMAGE =

src/index.js

@@ -32,11 +32,12 @@ export type Options = {
     offsetY: number
 };
 
-const html2canvas = (element: HTMLElement, config: Options = {}): Promise<*> => {
+const html2canvas = (element: HTMLElement, conf: ?Options): Promise<*> => {
     if (typeof console === 'object' && typeof console.log === 'function') {
         console.log(`html2canvas ${__VERSION__}`);
     }
 
+    const config = conf || {};
     const logger = new Logger();
 
     const ownerDocument = element.ownerDocument;