Add onclone callback option to allow modifying cloned document prior …

…to rendering
niklasvh · Oct 26, 2014 · 1793b80 · 1793b80
1 parent 8184b7c
commit 1793b80
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 4 deletions.
diff --git a/dist/html2canvas.js b/dist/html2canvas.js
@@ -613,7 +613,10 @@ function renderDocument(document, options, windowWidth, windowHeight) {
         document.querySelector(selector).removeAttribute(html2canvasNodeAttribute);
         var clonedWindow = container.contentWindow;
         var node = clonedWindow.document.querySelector(selector);
-        return renderWindow(node, container, options, windowWidth, windowHeight);
+        var oncloneHandler = (typeof(options.onclone) === "function") ? Promise.resolve(options.onclone(clonedWindow.document)) : Promise.resolve(true);
+        return oncloneHandler.then(function() {
+            return renderWindow(node, container, options, windowWidth, windowHeight);
+        });
     });
 }
 

diff --git a/dist/html2canvas.min.js b/dist/html2canvas.min.js
diff --git a/src/core.js b/src/core.js
@@ -45,7 +45,10 @@ function renderDocument(document, options, windowWidth, windowHeight) {
         document.querySelector(selector).removeAttribute(html2canvasNodeAttribute);
         var clonedWindow = container.contentWindow;
         var node = clonedWindow.document.querySelector(selector);
-        return renderWindow(node, container, options, windowWidth, windowHeight);
+        var oncloneHandler = (typeof(options.onclone) === "function") ? Promise.resolve(options.onclone(clonedWindow.document)) : Promise.resolve(true);
+        return oncloneHandler.then(function() {
+            return renderWindow(node, container, options, windowWidth, windowHeight);
+        });
     });
 }
 

diff --git a/tests/mocha/options.onclone.html b/tests/mocha/options.onclone.html
@@ -0,0 +1,71 @@
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Mocha Tests</title>
+    <link rel="stylesheet" href="lib/mocha.css" />
+    <script src="../../dist/html2canvas.js"></script>
+    <script src="../assets/jquery-1.6.2.js"></script>
+    <script src="lib/expect.js"></script>
+    <script src="lib/mocha.js"></script>
+</head>
+<body>
+<div id="mocha"></div>
+<script>mocha.setup('bdd')</script>
+<div style="background: red; width: 200px; height:200px;" id="block"></div>
+<script>
+    describe("options.onclone", function() {
+        it("with a function", function(done) {
+            html2canvas(document.querySelector("#block"), {onclone: function(document) {
+                document.querySelector("#block").style.background = "green";
+            }}).then(function(canvas) {
+                expect(canvas.width).to.equal(200);
+                expect(canvas.height).to.equal(200);
+                expect(document.querySelector("#block").style.backgroundColor).to.equal("red");
+                validCanvasPixels(canvas);
+                done();
+            }).catch(function(error) {
+                done(error);
+            });
+        });
+
+        it("with a promise", function(done) {
+            html2canvas(document.querySelector("#block"), {onclone: function(document) {
+                return new Promise(function(resolve) {
+                    setTimeout(function() {
+                        document.querySelector("#block").style.background = "green";
+                        resolve();
+                    }, 500);
+                });
+            }}).then(function(canvas) {
+                expect(canvas.width).to.equal(200);
+                expect(canvas.height).to.equal(200);
+                expect(document.querySelector("#block").style.backgroundColor).to.equal("red");
+                validCanvasPixels(canvas);
+                done();
+            }).catch(function(error) {
+                done(error);
+            });
+        });
+    });
+
+    function validCanvasPixels(canvas) {
+        var ctx = canvas.getContext("2d");
+        var data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+        for (var i = 0, len = data.length; i < len; i+=4) {
+            if (data[i] !== 0 || data[i+1] !== 128 || data[i+2] !== 0 || data[i+3] !== 255) {
+                expect().fail("Invalid canvas data");
+            }
+        }
+    }
+
+    mocha.checkLeaks();
+    mocha.globals(['jQuery']);
+    if (window.mochaPhantomJS) {
+        mochaPhantomJS.run();
+    }
+    else {
+        mocha.run();
+    }
+</script>
+</body>
+</html>