fix: image loading="lazy" fix #2312

niklasvh · Aug 8, 2020 · 8330e20 · 8330e20
1 parent 04e145b
commit 8330e20
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/src/dom/document-cloner.ts b/src/dom/document-cloner.ts
@@ -5,6 +5,7 @@ import {
     isElementNode,
     isHTMLElementNode,
     isIFrameElement,
+    isImageElement,
     isScriptElement,
     isSelectElement,
     isStyleElement,
@@ -128,7 +129,15 @@ export class DocumentCloner {
             return this.createStyleClone(node);
         }
 
-        return node.cloneNode(false) as HTMLElement;
+        const clone = node.cloneNode(false) as HTMLElement;
+
+        // @ts-ignore
+        if (isImageElement(clone) && clone.loading === 'lazy') {
+            // @ts-ignore
+            clone.loading = 'eager';
+        }
+
+        return clone;
     }
 
     createStyleClone(node: HTMLStyleElement): HTMLStyleElement {

diff --git a/src/index.ts b/src/index.ts
@@ -25,7 +25,7 @@ const html2canvas = (element: HTMLElement, options: Partial<Options> = {}): Prom
 
 export default html2canvas;
 
-if (typeof window !== "undefined") {
+if (typeof window !== 'undefined') {
     CacheStorage.setContext(window);
 }
 

diff --git a/tests/reftests/images/images.html b/tests/reftests/images/images.html
@@ -7,6 +7,7 @@
   </head>
   <body>
     <img src="../../assets/image.jpg" />
+    <img src="../../assets/image.jpg" loading="lazy" />
     <img src="../../assets/image.jpg" style="width:50px;height:400px;" />
     <img src="../../assets/image.jpg" style="width:500px;"  />
     <img src="../../assets/image.jpg" style="width:100px;border-radius:50px;"  />