Add option to filter style properties

1904labs · Nov 8, 2024 · 825c5eb · 825c5eb
1 parent d5327ef
commit 825c5eb
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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==
diff --git a/spec/resources/filterStyles/dom-node.html b/spec/resources/filterStyles/dom-node.html
@@ -0,0 +1,2 @@
+<div class="rect1">15</div>
+<div class="rect2">22</div>
diff --git a/spec/resources/filterStyles/style.css 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
@@ -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