From 825c5eb26c6ccc8512adaaa2cb605fe7d77446c3 Mon Sep 17 00:00:00 2001 From: ludovic Date: Fri, 8 Nov 2024 12:11:00 +0100 Subject: [PATCH 1/2] Add option to filter style properties --- README.md | 15 ++++++++++++++- spec/dom-to-image-more.spec.js | 16 ++++++++++++++++ spec/resources/filterStyles/control-image | 1 + spec/resources/filterStyles/dom-node.html | 2 ++ spec/resources/filterStyles/style.css | 15 +++++++++++++++ src/dom-to-image-more.js | 9 +++++++++ 6 files changed, 57 insertions(+), 1 deletion(-) create mode 100644 spec/resources/filterStyles/control-image create mode 100644 spec/resources/filterStyles/dom-node.html create mode 100644 spec/resources/filterStyles/style.css diff --git a/README.md b/README.md index 00456a81..d5580d25 100644 --- a/README.md +++ b/README.md @@ -59,7 +59,7 @@ var domtoimage = require('dom-to-image-more'); ## Usage All the top level functions accept DOM node and rendering options, and return promises, -which are fulfilled with corresponding data URLs. +which are fulfilled with corresponding data URLs. Get a PNG image base64-encoded data URL and display right away: ```javascript @@ -168,6 +168,19 @@ A function taking DOM node as argument. Should return true if passed node should included in the output (excluding node means excluding it's children as well). Not called on the root node. +#### filterStyles + +A function taking style propertie name as argument. Should return true if passed propertie should be +included in the output + +Sample use: + +``` + filterStyles(node, propertyName) { + return !propertyName.startssWith('--'); // to filter out CSS variables + } +``` + #### adjustClonedNode A function that will be invoked on each node as they are cloned. Useful to adjust nodes in diff --git a/spec/dom-to-image-more.spec.js b/spec/dom-to-image-more.spec.js index dc95ba48..5375edc1 100644 --- a/spec/dom-to-image-more.spec.js +++ b/spec/dom-to-image-more.spec.js @@ -38,6 +38,22 @@ .catch(done); }); + it('should handle filterStyles', function (done) { + function filterStyles(propertyName) { + return propertyName !== 'background-color'; + } + + loadTestPage( + 'filterStyles/dom-node.html', + 'filterStyles/style.css', + 'filterStyles/control-image' + ) + .then(() => renderToPng(domNode(), { filterStyles: filterStyles })) + .then(check) + .then(done) + .catch(done); + }); + it('should render to svg', function (done) { loadTestPage( 'small/dom-node.html', diff --git a/spec/resources/filterStyles/control-image b/spec/resources/filterStyles/control-image new file mode 100644 index 00000000..b34cfff2 --- /dev/null +++ b/spec/resources/filterStyles/control-image @@ -0,0 +1 @@ +data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAABOZJREFUeF7tnU3IFlUUx3+GSSEaSUQYkfaBFVJu0nBVi8LwA6MMWhTUrn0rQa1ApYW6aVXZFxIRVAZlGysVikDQMgqjglpEIKRQgmWRzYE7MIzzPmfu+Ho9L/MfEPW955n7P//fnLnPXJnjLHSEcmBWKDUSg4AEuwgERECCORBMzqQKuQs4AfzmaL6lY/wm4Ebg5WD5hpfTBeROYDPwMHA/sH9CFvcCn00xfh9wILwDwQQ2gdhVvR14tKHRA/IhsLojp2PAMuBcsHzDy2kCWQL8kxT/lH6fBGRpVUXfAHcDR1qZ/hc+86ACu25Zc4C/ewB5JcFYAfwVNL8ZJ2sokIXAr41svwT2AC81qmzGmRFB8FAgm4DnOxL4DngaOBQhuZmoYSiQq9OibberlcDaVvK2vnw7Ew251JqHAmnrviZVjFWHHbbI22KvxT2T8HQBqae125jdzuy4FfgxU8/ow6cbyBXAL8C1wCPAu6N3ONOA6QZi078JPA48BrydqWf04RcDyG7gKUAL+4DL62IA+RpYDCwA/h2gadQf6QIyFzidXOnaOrEn+QfSgn285d564H1gTfUt66NROzsw+S4gq4CP0/m2dDwA2maibSraYXE7q13hz6uvuuvSdvsLwNaBekb/sSYQu+dv63jI+yAt1O8lt+wblG2539Fy79Oqsp4Bjo7e1QswYOg/4V4GXFdVxPXAKeBnrRcXQKHx0aFApmd2neU8BwQk2EUhIAISzIFgclQhAhLMgWByVCECEsyBYHJUIQISzIFgclQhAhLMgWByVCECEsyBYHJUIQISzIFgclQhAhLMgWByVCECEsyBYHJUIQISzIFgclQhAhLMgWByVCECEsyBYHJUIQISzIFgclQhAhLMgWByVCECEsyBYHLaFXI5cE966f93wF7gtJdxpjpy44OlH09OE4h1h7NXmq2RWfPYAWysfp1t/Tw3Pl72ARXVQOpmZNZj0dry2ZX/UEPvc9Wfn238PTc+YOoxJdVAPgH+BJ4A/khSbwMOpjYZ9qN5jdelc+NjZh9QlQGxZmT2vvki4GRLo7XIsFYZdiyv+iseHhAfMO24kgyILeK3V21dX+uQaS1gf2gByY2Pm31AZd5zSL1WmPT56bY2KY3c+ICWXFpJHhDr6PNWarNk7Za8IzfeO9/oxicBsbEv0i3NFvjvHXdy40dndp+EJwHZULXPeKdqSPZkteC/3uNkufE9Tjm+kKmA3Jx6lryYHgo9Z3LjvfONdrwLyFXpVvVV6gznNbLMjR+t2X0SbwOZXbV/3ZsaydgtqG49PtW5cuP7aBp1TBOIdfh5tdrPuiE1IDvTcsbavlprproxWW78qI3um3wTyK7USdT+m4m6o5yd50rAGvW/AVhzs7ofVm58X02jjquBWOe45uZhlym2bWLbJ3bkxo/a5JzkDciDldH7enzIOo3a9kpufI9TK6R2wHtSl1OFHRCQwoZ70wmI51DhcQEpbLg3nYB4DhUeF5DChnvTCYjnUOFxASlsuDedgHgOFR4XkMKGe9MJiOdQ4XEBKWy4N52AeA4VHheQwoZ70wmI51DhcQEpbLg3nYB4DhUeF5DChnvTCYjnUOFxASlsuDedgHgOFR4XkMKGe9MJiOdQ4XEBKWy4N52AeA4VHheQwoZ70wmI51DhcQEpbLg33f/VR7Zl223M/AAAAABJRU5ErkJggg== \ No newline at end of file diff --git a/spec/resources/filterStyles/dom-node.html b/spec/resources/filterStyles/dom-node.html new file mode 100644 index 00000000..21ec611c --- /dev/null +++ b/spec/resources/filterStyles/dom-node.html @@ -0,0 +1,2 @@ +
15
+
22
diff --git a/spec/resources/filterStyles/style.css b/spec/resources/filterStyles/style.css new file mode 100644 index 00000000..1b531a7f --- /dev/null +++ b/spec/resources/filterStyles/style.css @@ -0,0 +1,15 @@ +#dom-node { + width: 100px; +} + +.rect1 { + height: 50px; + background-color: green; + font-size: x-large; +} + +.rect2 { + height: 50px; + background-color: red; + font-size: x-large; +} diff --git a/src/dom-to-image-more.js b/src/dom-to-image-more.js index bb67fe62..78243f73 100644 --- a/src/dom-to-image-more.js +++ b/src/dom-to-image-more.js @@ -26,6 +26,8 @@ corsImg: undefined, // Callback for adjustClonedNode eventing (to allow adjusting clone's properties) adjustClonedNode: undefined, + // Callback to filter style properties to be included in the output + filterStyles: undefined, }; const domtoimage = { @@ -89,6 +91,7 @@ * - @param {Object} headers - eg: { "Content-Type", "application/json;charset=UTF-8" } * - @param {Object} data - post payload * @param {Function} options.adjustClonedNode - callback for adjustClonedNode eventing (to allow adjusting clone's properties) + * @param {Function} options.filterStyles - Should return true if passed propertyName should be included in the output * @return {Promise} - A promise that is fulfilled with a SVG image data URL * */ function toSvg(node, options) { @@ -1272,6 +1275,12 @@ const targetStyle = targetElement.style; util.asArray(sourceComputedStyles).forEach(function (name) { + if (options.filterStyles) { + if (!options.filterStyles(name)) { + return; + } + } + const sourceValue = sourceComputedStyles.getPropertyValue(name); const defaultValue = defaultStyle[name]; const parentValue = parentComputedStyles From 2c4211fb37dc43ed10e63e9fd249f6076590aa71 Mon Sep 17 00:00:00 2001 From: ludovic Date: Tue, 14 Jan 2025 12:11:13 +0100 Subject: [PATCH 2/2] Add the parameter node to filterStyles function --- spec/dom-to-image-more.spec.js | 2 +- src/dom-to-image-more.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/spec/dom-to-image-more.spec.js b/spec/dom-to-image-more.spec.js index 5375edc1..f1919631 100644 --- a/spec/dom-to-image-more.spec.js +++ b/spec/dom-to-image-more.spec.js @@ -39,7 +39,7 @@ }); it('should handle filterStyles', function (done) { - function filterStyles(propertyName) { + function filterStyles(node, propertyName) { return propertyName !== 'background-color'; } diff --git a/src/dom-to-image-more.js b/src/dom-to-image-more.js index 78243f73..2755a1ac 100644 --- a/src/dom-to-image-more.js +++ b/src/dom-to-image-more.js @@ -1276,7 +1276,7 @@ util.asArray(sourceComputedStyles).forEach(function (name) { if (options.filterStyles) { - if (!options.filterStyles(name)) { + if (!options.filterStyles(sourceElement, name)) { return; } }