html2canvas - npm Package Compare versions

Comparing version 1.4.0 to 1.4.1

CHANGELOG.md

@@ -5,2 +5,20 @@ # Changelog
 
+## [1.4.1](https://github.com/niklasvh/html2canvas/compare/v1.4.0...v1.4.1) (2022-01-22)
+
+
+### deps
+
+* fix source maps (#2812) ([67c5e8d](https://github.com/niklasvh/html2canvas/commit/67c5e8dec4b2af9260a2b5b75b3399495fd1fee9)), closes [#2812](https://github.com/niklasvh/html2canvas/issues/2812)
+
+### feat
+
+* add support for <video> elements (#2788) ([181d1b1](https://github.com/niklasvh/html2canvas/commit/181d1b1103910d6e1b5277d5c007fc5e3006c6bf)), closes [#2788](https://github.com/niklasvh/html2canvas/issues/2788)
+
+### fix
+
+* Properties x and y of BoundingRect is undefined in old browser (#2797) ([e587a82](https://github.com/niklasvh/html2canvas/commit/e587a82dca01d9ada78cae34fd1bdb934e547f9b)), closes [#2797](https://github.com/niklasvh/html2canvas/issues/2797)
+* source maps (#2787) ([46db867](https://github.com/niklasvh/html2canvas/commit/46db86755f064828559a4b0b37310f3ae94f5494)), closes [#2787](https://github.com/niklasvh/html2canvas/issues/2787)
+
+
+
 # [1.4.0](https://github.com/niklasvh/html2canvas/compare/v1.3.4...v1.4.0) (2022-01-01)
@@ -7,0 +25,0 @@

dist/lib/css/layout/bounds.js

@@ -20,3 +20,3 @@ "use strict";
         return domRect
-            ? new Bounds(domRect.x + context.windowBounds.left, domRect.y + context.windowBounds.top, domRect.width, domRect.height)
+            ? new Bounds(domRect.left + context.windowBounds.left, domRect.top + context.windowBounds.top, domRect.width, domRect.height)
             : Bounds.EMPTY;
@@ -23,0 +23,0 @@ };

dist/lib/dom/document-cloner.js

@@ -129,2 +129,5 @@ "use strict";
         }
+        if (node_parser_1.isVideoElement(node)) {
+            return this.createVideoClone(node);
+        }
         if (node_parser_1.isStyleElement(node)) {
@@ -217,2 +220,24 @@ return this.createStyleClone(node);
     };
+    DocumentCloner.prototype.createVideoClone = function (video) {
+        var canvas = video.ownerDocument.createElement('canvas');
+        canvas.width = video.offsetWidth;
+        canvas.height = video.offsetHeight;
+        var ctx = canvas.getContext('2d');
+        try {
+            if (ctx) {
+                ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+                if (!this.options.allowTaint) {
+                    ctx.getImageData(0, 0, canvas.width, canvas.height);
+                }
+            }
+            return canvas;
+        }
+        catch (e) {
+            this.context.logger.info("Unable to clone video as it is tainted", video);
+        }
+        var blankCanvas = video.ownerDocument.createElement('canvas');
+        blankCanvas.width = video.offsetWidth;
+        blankCanvas.height = video.offsetHeight;
+        return blankCanvas;
+    };
     DocumentCloner.prototype.appendChildNode = function (clone, child, copyStyles) {
@@ -228,4 +253,17 @@ if (!node_parser_1.isElementNode(child) ||
     };
+    DocumentCloner.prototype.cloneChildNodes = function (node, clone, copyStyles) {
+        var _this = this;
+        for (var child = node.shadowRoot ? node.shadowRoot.firstChild : node.firstChild; child; child = child.nextSibling) {
+            if (node_parser_1.isElementNode(child) && node_parser_1.isSlotElement(child) && typeof child.assignedNodes === 'function') {
+                var assignedNodes = child.assignedNodes();
+                if (assignedNodes.length) {
+                    assignedNodes.forEach(function (assignedNode) { return _this.appendChildNode(clone, assignedNode, copyStyles); });
+                }
+            }
+            else {
+                this.appendChildNode(clone, child, copyStyles);
+            }
+        }
+    };
     DocumentCloner.prototype.cloneNode = function (node, copyStyles) {
-        var _this = this;
         if (node_parser_1.isTextNode(node)) {
@@ -239,35 +277,27 @@ return document.createTextNode(node.data);
         if (window && node_parser_1.isElementNode(node) && (node_parser_1.isHTMLElementNode(node) || node_parser_1.isSVGElementNode(node))) {
-            var clone_1 = this.createElementClone(node);
-            clone_1.style.transitionProperty = 'none';
+            var clone = this.createElementClone(node);
+            clone.style.transitionProperty = 'none';
             var style = window.getComputedStyle(node);
             var styleBefore = window.getComputedStyle(node, ':before');
             var styleAfter = window.getComputedStyle(node, ':after');
-            if (this.referenceElement === node && node_parser_1.isHTMLElementNode(clone_1)) {
-                this.clonedReferenceElement = clone_1;
+            if (this.referenceElement === node && node_parser_1.isHTMLElementNode(clone)) {
+                this.clonedReferenceElement = clone;
             }
-            if (node_parser_1.isBodyElement(clone_1)) {
-                createPseudoHideStyles(clone_1);
+            if (node_parser_1.isBodyElement(clone)) {
+                createPseudoHideStyles(clone);
             }
             var counters = this.counters.parse(new index_1.CSSParsedCounterDeclaration(this.context, style));
-            var before = this.resolvePseudoContent(node, clone_1, styleBefore, PseudoElementType.BEFORE);
+            var before = this.resolvePseudoContent(node, clone, styleBefore, PseudoElementType.BEFORE);
             if (node_parser_1.isCustomElement(node)) {
                 copyStyles = true;
             }
-            for (var child = node.shadowRoot ? node.shadowRoot.firstChild : node.firstChild; child; child = child.nextSibling) {
-                if (node_parser_1.isElementNode(child) && node_parser_1.isSlotElement(child) && typeof child.assignedNodes === 'function') {
-                    var assignedNodes = child.assignedNodes();
-                    if (assignedNodes.length) {
-                        assignedNodes.forEach(function (assignedNode) { return _this.appendChildNode(clone_1, assignedNode, copyStyles); });
-                    }
-                }
-                else {
-                    this.appendChildNode(clone_1, child, copyStyles);
-                }
+            if (!node_parser_1.isVideoElement(node)) {
+                this.cloneChildNodes(node, clone, copyStyles);
             }
             if (before) {
-                clone_1.insertBefore(before, clone_1.firstChild);
+                clone.insertBefore(before, clone.firstChild);
             }
-            var after = this.resolvePseudoContent(node, clone_1, styleAfter, PseudoElementType.AFTER);
+            var after = this.resolvePseudoContent(node, clone, styleAfter, PseudoElementType.AFTER);
             if (after) {
-                clone_1.appendChild(after);
+                clone.appendChild(after);
             }
@@ -277,12 +307,12 @@ this.counters.pop(counters);
                 copyStyles) {
-                exports.copyCSSStyles(style, clone_1);
+                exports.copyCSSStyles(style, clone);
             }
             if (node.scrollTop !== 0 || node.scrollLeft !== 0) {
-                this.scrolledElements.push([clone_1, node.scrollLeft, node.scrollTop]);
+                this.scrolledElements.push([clone, node.scrollLeft, node.scrollTop]);
             }
             if ((node_parser_1.isTextareaElement(node) || node_parser_1.isSelectElement(node)) &&
-                (node_parser_1.isTextareaElement(clone_1) || node_parser_1.isSelectElement(clone_1))) {
-                clone_1.value = node.value;
+                (node_parser_1.isTextareaElement(clone) || node_parser_1.isSelectElement(clone))) {
+                clone.value = node.value;
             }
-            return clone_1;
+            return clone;
         }
@@ -289,0 +319,0 @@ return node.cloneNode(false);

dist/lib/dom/node-parser.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isCustomElement = exports.isSlotElement = exports.isSelectElement = exports.isTextareaElement = exports.isScriptElement = exports.isStyleElement = exports.isIFrameElement = exports.isImageElement = exports.isCanvasElement = exports.isBodyElement = exports.isSVGElement = exports.isHTMLElement = exports.isInputElement = exports.isOLElement = exports.isLIElement = exports.isSVGElementNode = exports.isHTMLElementNode = exports.isElementNode = exports.isTextNode = exports.parseTree = void 0;
+exports.isCustomElement = exports.isSlotElement = exports.isSelectElement = exports.isTextareaElement = exports.isScriptElement = exports.isStyleElement = exports.isIFrameElement = exports.isImageElement = exports.isVideoElement = exports.isCanvasElement = exports.isBodyElement = exports.isSVGElement = exports.isHTMLElement = exports.isInputElement = exports.isOLElement = exports.isLIElement = exports.isSVGElementNode = exports.isHTMLElementNode = exports.isElementNode = exports.isTextNode = exports.parseTree = void 0;
 var element_container_1 = require("./element-container");
@@ -123,2 +123,4 @@ var text_container_1 = require("./text-container");
 exports.isCanvasElement = isCanvasElement;
+var isVideoElement = function (node) { return node.tagName === 'VIDEO'; };
+exports.isVideoElement = isVideoElement;
 var isImageElement = function (node) { return node.tagName === 'IMG'; };
@@ -125,0 +127,0 @@ exports.isImageElement = isImageElement;

dist/types/dom/document-cloner.d.ts

@@ -33,3 +33,5 @@ import { Bounds } from '../css/layout/bounds';
     createCanvasClone(canvas: HTMLCanvasElement): HTMLImageElement | HTMLCanvasElement;
+    createVideoClone(video: HTMLVideoElement): HTMLCanvasElement;
     appendChildNode(clone: HTMLElement | SVGElement, child: Node, copyStyles: boolean): void;
+    cloneChildNodes(node: Element, clone: HTMLElement | SVGElement, copyStyles: boolean): void;
     cloneNode(node: Node, copyStyles: boolean): Node;
@@ -36,0 +38,0 @@ resolvePseudoContent(node: Element, clone: Element, style: CSSStyleDeclaration, pseudoElt: PseudoElementType): HTMLElement | void;

dist/types/dom/node-parser.d.ts

@@ -15,2 +15,3 @@ import { ElementContainer } from './element-container';
 export declare const isCanvasElement: (node: Element) => node is HTMLCanvasElement;
+export declare const isVideoElement: (node: Element) => node is HTMLVideoElement;
 export declare const isImageElement: (node: Element) => node is HTMLImageElement;
@@ -17,0 +18,0 @@ export declare const isIFrameElement: (node: Element) => node is HTMLIFrameElement;

package.json

@@ -9,3 +9,3 @@ {
   "browser": "dist/html2canvas.js",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "author": {
@@ -122,5 +122,5 @@ "name": "Niklas von Hertzen",
   "dependencies": {
-    "css-line-break": "2.0.1",
-    "text-segmentation": "^1.0.2"
+    "css-line-break": "^2.1.0",
+    "text-segmentation": "^1.0.3"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3379055

increased by39.57%

Lines of code

26405

increased by0.53%

Dependency changes

• + Addedcss-line-break@2.1.0(transitive)

• - Removedbase64-arraybuffer@0.2.0(transitive)

• - Removedcss-line-break@2.0.1(transitive)

• Updatedcss-line-break@^2.1.0

• Updatedtext-segmentation@^1.0.3