From e5ca373d5771d6818dec3d0589df8e51e97fe6e2 Mon Sep 17 00:00:00 2001
From: MoyuScript <i@moyu.moe>
Date: Thu, 15 Feb 2018 21:22:51 +0800
Subject: [PATCH] Add ignoreElements predicate function option

---
 docs/configuration.md              |  1 +
 package.json                       |  2 +-
 src/Clone.js                       |  8 ++++++--
 src/index.js                       |  1 +
 tests/reftests/options/ignore.html | 11 +++++++----
 5 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/docs/configuration.md b/docs/configuration.md
index 85553e2..8b2ecd1 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -17,6 +17,7 @@ These are all of the available configuration options.
 | canvas | `null` | Existing `canvas` element to use as a base for drawing on
 | foreignObjectRendering | `false` | Whether to use ForeignObject rendering if the browser supports it
 | imageTimeout | `15000` | Timeout for loading an image (in milliseconds). Set to `0` to disable timeout.
+| ignoreElements | `(element) => false` | Predicate function which removes the matching elements from the render.
 | logging | `true` | Enable logging for debug purposes
 | proxy | `null` | Url to the [proxy](/proxy/) which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.
 | removeContainer | `true` | Whether to cleanup the cloned DOM elements html2canvas creates temporarily
diff --git a/package.json b/package.json
index 830b266..7980863 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,7 @@
     "build": "rimraf dist/ && node scripts/create-reftest-list && npm run build:npm && npm run build:browser",
     "build:npm": "babel src/ -d dist/npm/ --plugins=dev-expression,transform-es2015-modules-commonjs && replace-in-file __VERSION__ '\"$npm_package_version\"' dist/npm/index.js",
     "build:browser": "webpack",
-    "format": "prettier --single-quote --no-bracket-spacing --tab-width 4 --print-width 100 --write \"{src,www,tests,scripts}/**/*.js\"",
+    "format": "prettier --single-quote --no-bracket-spacing --tab-width 4 --print-width 100 --write \"{src,www/src,tests,scripts}/**/*.js\"",
     "flow": "flow",
     "lint": "eslint src/**",
     "test": "npm run flow && npm run lint && npm run test:node && npm run karma",
diff --git a/src/Clone.js b/src/Clone.js
index 1de4eb7..d216956 100644
--- a/src/Clone.js
+++ b/src/Clone.js
@@ -268,8 +268,12 @@ export class DocumentCloner {
         for (let child = node.firstChild; child; child = child.nextSibling) {
             if (
                 child.nodeType !== Node.ELEMENT_NODE ||
-                // $FlowFixMe
-                (child.nodeName !== 'SCRIPT' && !child.hasAttribute(IGNORE_ATTRIBUTE))
+                (child.nodeName !== 'SCRIPT' &&
+                    // $FlowFixMe
+                    !child.hasAttribute(IGNORE_ATTRIBUTE) &&
+                    (typeof this.options.ignoreElements !== 'function' ||
+                        // $FlowFixMe
+                        !this.options.ignoreElements(child)))
             ) {
                 if (!this.copyStyles || child.nodeName !== 'STYLE') {
                     clone.appendChild(this.cloneNode(child));
diff --git a/src/index.js b/src/index.js
index 45431c6..0acc380 100644
--- a/src/index.js
+++ b/src/index.js
@@ -14,6 +14,7 @@ export type Options = {
     backgroundColor: string,
     canvas: ?HTMLCanvasElement,
     foreignObjectRendering: boolean,
+    ignoreElements?: HTMLElement => boolean,
     imageTimeout: number,
     logging: boolean,
     proxy: ?string,
diff --git a/tests/reftests/options/ignore.html b/tests/reftests/options/ignore.html
index 1280818..f7c7872 100644
--- a/tests/reftests/options/ignore.html
+++ b/tests/reftests/options/ignore.html
@@ -4,7 +4,9 @@
     <title>element render test</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <script>
-
+        h2cOptions = {ignoreElements: function(element) {
+            return element.className === 'ignored';
+        }};
     </script>
     <script type="text/javascript" src="../../test.js"></script>
     <style>
@@ -15,7 +17,7 @@
             background: green;
         }
 
-        #ignored {
+        #ignored, .ignored {
             background: red;
             width: 100px;
             height: 100px;
@@ -32,10 +34,11 @@
 <div id="ignored" data-html2canvas-ignore>
     great failure
 </div>
+<div class="ignored">
+    ignore predicate
+</div>
 <div id="div1">
     great success
 </div>
-
-
 </body>
 </html>