From dcf4fa6c4b050a4032cff557c957e72bc06f223c Mon Sep 17 00:00:00 2001 From: "SNDST00M: M.U.N.I.N" <82655227+4086606@users.noreply.github.com> Date: Mon, 26 Jul 2021 14:43:20 +0100 Subject: [PATCH 1/3] Limit injected SVG styles to user cascade origin --- src/dom-to-image-more.js | 37 +++++++++++++++++++++++++++++++++---- 1 file changed, 33 insertions(+), 4 deletions(-) diff --git a/src/dom-to-image-more.js b/src/dom-to-image-more.js index 0e4bc361..6748bf98 100644 --- a/src/dom-to-image-more.js +++ b/src/dom-to-image-more.js @@ -261,7 +261,7 @@ }); function cloneStyle() { - copyStyle(window.getComputedStyle(original), clone.style); + copyStyle(getUserComputedStyle(original), clone.style); function copyFont(source, target) { target.font = source.font; @@ -314,7 +314,7 @@ }); function clonePseudoElement(element) { - var style = window.getComputedStyle(original, element); + var style = getUserComputedStyle(original, element); var content = style.getPropertyValue('content'); if (content === '' || content === 'none') return; @@ -469,7 +469,7 @@ function toBlob(canvas) { return new Promise(function(resolve) { - var binaryString = window.atob(canvas.toDataURL().split(',')[1]); + var binaryString = global.atob(canvas.toDataURL().split(',')[1]); var length = binaryString.length; var binaryArray = new Uint8Array(length); @@ -637,7 +637,7 @@ } function px(node, styleProperty) { - var value = window.getComputedStyle(node).getPropertyValue(styleProperty); + var value = getUserComputedStyle(node).getPropertyValue(styleProperty); return parseFloat(value.replace('px', '')); } } @@ -842,4 +842,33 @@ } } } + + function getUserComputedStyle(element, pseudo) { + var computedStyles = global.getComputedStyle(element, pseudo); + var inlineStyles = element.style; + + if (pseudo) { + return computedStyles; + } + + for (var i = 0; i < computedStyles.length; i++) { + var key = computedStyles[i]; + var value = computedStyles.getPropertyValue(key); + var inlineValue = inlineStyles.getPropertyValue(key); + + if (!inlineValue.length) { + inlineStyles.setProperty(key, 'initial'); + + var initialValue = computedStyles.getPropertyValue(key); + + if (initialValue !== value) { + inlineStyles.setProperty(key, value); + } else { + inlineStyles.removeProperty(key); + } + } + } + + return inlineStyles; + } })(this); From 836e163e922f457be73002bf12cfb917c7e393f0 Mon Sep 17 00:00:00 2001 From: "SNDST00M: M.U.N.I.N" <82655227+4086606@users.noreply.github.com> Date: Tue, 27 Jul 2021 06:53:53 +0100 Subject: [PATCH 2/3] Fix container size and reduce styling further --- src/dom-to-image-more.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/dom-to-image-more.js b/src/dom-to-image-more.js index 6748bf98..1004cb9d 100644 --- a/src/dom-to-image-more.js +++ b/src/dom-to-image-more.js @@ -1,4 +1,4 @@ -(function(global) { +(function(window) { 'use strict'; var util = newUtil(); @@ -35,7 +35,7 @@ if (typeof exports === "object" && typeof module === "object") module.exports = domtoimage; else - global.domtoimage = domtoimage; + window.domtoimage = domtoimage; /** * @param {Node} node - The DOM Node object to render @@ -261,7 +261,7 @@ }); function cloneStyle() { - copyStyle(getUserComputedStyle(original), clone.style); + copyStyle(getUserComputedStyle(original, root), clone.style); function copyFont(source, target) { target.font = source.font; @@ -314,7 +314,7 @@ }); function clonePseudoElement(element) { - var style = getUserComputedStyle(original, element); + var style = window.getComputedStyle(original, element); var content = style.getPropertyValue('content'); if (content === '' || content === 'none') return; @@ -469,7 +469,7 @@ function toBlob(canvas) { return new Promise(function(resolve) { - var binaryString = global.atob(canvas.toDataURL().split(',')[1]); + var binaryString = window.atob(canvas.toDataURL().split(',')[1]); var length = binaryString.length; var binaryArray = new Uint8Array(length); @@ -637,7 +637,7 @@ } function px(node, styleProperty) { - var value = getUserComputedStyle(node).getPropertyValue(styleProperty); + var value = window.getComputedStyle(node).getPropertyValue(styleProperty); return parseFloat(value.replace('px', '')); } } @@ -843,8 +843,8 @@ } } - function getUserComputedStyle(element, pseudo) { - var computedStyles = global.getComputedStyle(element, pseudo); + function getUserComputedStyle(element, root) { + var computedStyles = window.getComputedStyle(element); var inlineStyles = element.style; if (pseudo) { @@ -857,7 +857,7 @@ var inlineValue = inlineStyles.getPropertyValue(key); if (!inlineValue.length) { - inlineStyles.setProperty(key, 'initial'); + inlineStyles.setProperty(key, root ? 'initial' : 'unset'); var initialValue = computedStyles.getPropertyValue(key); From e8ecdc1bc63e2b0903f6de11e9fe88483de958a2 Mon Sep 17 00:00:00 2001 From: "SNDST00M: M.U.N.I.N" <82655227+4086606@users.noreply.github.com> Date: Tue, 27 Jul 2021 10:24:24 +0100 Subject: [PATCH 3/3] Remove undefined `pseudo` variable --- src/dom-to-image-more.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/dom-to-image-more.js b/src/dom-to-image-more.js index 1004cb9d..65428000 100644 --- a/src/dom-to-image-more.js +++ b/src/dom-to-image-more.js @@ -847,10 +847,6 @@ var computedStyles = window.getComputedStyle(element); var inlineStyles = element.style; - if (pseudo) { - return computedStyles; - } - for (var i = 0; i < computedStyles.length; i++) { var key = computedStyles[i]; var value = computedStyles.getPropertyValue(key);