Fix background rendering regression niklasvh#496

ms540 · Jan 10, 2015 · 7a58ad0 · 7a58ad0
1 parent 9b372a4
commit 7a58ad0
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 4 deletions.
diff --git a/dist/html2canvas.js b/dist/html2canvas.js
@@ -949,6 +949,8 @@ Color.prototype.namedColor = function(value) {
     return !!color;
 };
 
+Color.prototype.isColor = true;
+
 // JSON.stringify([].slice.call($$('.named-color-table tr'), 1).map(function(row) { return [row.childNodes[3].textContent, row.childNodes[5].textContent.trim().split(",").map(Number)] }).reduce(function(data, row) {data[row[0]] = row[1]; return data}, {}))
 var colors = {
     "aliceblue": [240, 248, 255],
@@ -3182,7 +3184,7 @@ function CanvasRenderer(width, height) {
 CanvasRenderer.prototype = Object.create(Renderer.prototype);
 
 CanvasRenderer.prototype.setFillStyle = function(fillStyle) {
-    this.ctx.fillStyle = typeof(fillStyle) === "object" ? fillStyle.toString() : fillStyle;
+    this.ctx.fillStyle = typeof(fillStyle) === "object" && !!fillStyle.isColor ? fillStyle.toString() : fillStyle;
     return this.ctx;
 };
 

diff --git a/dist/html2canvas.min.js b/dist/html2canvas.min.js
diff --git a/src/color.js b/src/color.js
@@ -114,6 +114,8 @@ Color.prototype.namedColor = function(value) {
     return !!color;
 };
 
+Color.prototype.isColor = true;
+
 // JSON.stringify([].slice.call($$('.named-color-table tr'), 1).map(function(row) { return [row.childNodes[3].textContent, row.childNodes[5].textContent.trim().split(",").map(Number)] }).reduce(function(data, row) {data[row[0]] = row[1]; return data}, {}))
 var colors = {
     "aliceblue": [240, 248, 255],

diff --git a/src/renderers/canvas.js b/src/renderers/canvas.js
@@ -15,7 +15,7 @@ function CanvasRenderer(width, height) {
 CanvasRenderer.prototype = Object.create(Renderer.prototype);
 
 CanvasRenderer.prototype.setFillStyle = function(fillStyle) {
-    this.ctx.fillStyle = typeof(fillStyle) === "object" ? fillStyle.toString() : fillStyle;
+    this.ctx.fillStyle = typeof(fillStyle) === "object" && !!fillStyle.isColor ? fillStyle.toString() : fillStyle;
     return this.ctx;
 };
 

diff --git a/tests/mocha/background.html b/tests/mocha/background.html
@@ -17,13 +17,26 @@
             height: 200px;
             background: green;
         }
+        #background-block {
+            width: 200px;
+            height: 200px;
+            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNgaGD4DwAChAGAJVtEDQAAAABJRU5ErkJggg==) red;
+        }
+        #gradient-block {
+            width: 200px;
+            height: 200px;
+            background-image: -webkit-linear-gradient(top, #008000, #008000);
+            background-image:         linear-gradient(to bottom, #008000, #008000);
+        }
     </style>
 </head>
 <body>
 <div id="mocha"></div>
 <script>mocha.setup('bdd')</script>
 <div id="block"></div>
 <div id="green-block"></div>
+<div id="background-block"></div>
+<div id="gradient-block"></div>
 <script>
     describe("options.background", function() {
         it("with hexcolor", function(done) {
@@ -60,11 +73,47 @@
         });
     });
 
+    describe('element background', function() {
+        it('with background-color', function(done) {
+            html2canvas(document.querySelector("#green-block")).then(function(canvas) {
+                expect(canvas.width).to.equal(200);
+                expect(canvas.height).to.equal(200);
+                validCanvasPixels(canvas);
+                done();
+            }).catch(function(error) {
+                done(error);
+            });
+        });
+
+        it('with background-image', function(done) {
+            html2canvas(document.querySelector("#background-block")).then(function(canvas) {
+                expect(canvas.width).to.equal(200);
+                expect(canvas.height).to.equal(200);
+                validCanvasPixels(canvas);
+                done();
+            }).catch(function(error) {
+                done(error);
+            });
+        });
+
+        it('with gradient background-image', function(done) {
+            html2canvas(document.querySelector("#gradient-block")).then(function(canvas) {
+                expect(canvas.width).to.equal(200);
+                expect(canvas.height).to.equal(200);
+                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) {
+                console.log(i,data[i], data[i+1], data[i+2], data[i+3]);
                 expect().fail("Invalid canvas data");
             }
         }