Major fixes to html2canvas

Author: eKoopmans

lib/html2canvas.ek.js

@@ -940,7 +940,8 @@ function html2canvas(nodeList, options) {
 
     var node = ((nodeList === undefined) ? [document.documentElement] : ((nodeList.length) ? nodeList : [nodeList]))[0];
     node.setAttribute(html2canvasNodeAttribute + index, index);
-    return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index).then(function(canvas) {
+    // EK 2017-03-24: Edited from `node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight,`.
+    return renderDocument(node.ownerDocument, options, node.clientWidth, node.clientHeight, index).then(function(canvas) {
         if (typeof(options.onrendered) === "function") {
             log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
             options.onrendered(canvas);
@@ -998,6 +999,16 @@ function renderWindow(node, container, options, windowWidth, windowHeight) {
             canvas = crop(renderer.canvas, {width: renderer.canvas.width, height: renderer.canvas.height, top: 0, left: 0, x: 0, y: 0});
         } else if (node === clonedWindow.document.body || node === clonedWindow.document.documentElement || options.canvas != null) {
             canvas = renderer.canvas;
+        } else if (options.scale) {
+            // EK 2017-03-25: Add dpi/scale.
+            var origBounds = {width: options.width != null ? options.width : bounds.width, height: options.height != null ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: 0, y: 0};
+            var cropBounds = {};
+            for (var key in origBounds) {
+                if (origBounds.hasOwnProperty(key)) { cropBounds[key] = origBounds[key] * options.scale; }
+            }
+            canvas = crop(renderer.canvas, cropBounds);
+            canvas.style.width = origBounds.width + 'px';
+            canvas.style.height = origBounds.height + 'px';
         } else {
             canvas = crop(renderer.canvas, {width:  options.width != null ? options.width : bounds.width, height: options.height != null ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: 0, y: 0});
         }
@@ -1740,6 +1751,11 @@ NodeContainer.prototype.parseTransformMatrix = function() {
     return this.transformMatrix;
 };
 
+NodeContainer.prototype.inverseTransform = function() {
+    var transformData = this.parseTransform();
+    return { origin: transformData.origin, matrix: matrixInverse(transformData.matrix) };
+}
+
 NodeContainer.prototype.parseBounds = function() {
     return this.bounds || (this.bounds = this.hasTransform() ? offsetBounds(this.node) : getBounds(this.node));
 };
@@ -1781,6 +1797,14 @@ function parseMatrix(match) {
     }
 }
 
+function matrixInverse(m) {
+    // EK 2017-03-25: This is specifically programmed to work for transform matrices.
+    var a = m[0], b = m[2], c = m[4], d = m[1], e = m[3], f = m[5];
+    var det = a*e - b*d;
+    var M = [e, -d, -b, a, b*f-c*e, c*d-a*f].map(function(val) {return val/det});
+    return M;
+}
+
 function isPercentage(value) {
     return value.toString().indexOf("%") !== -1;
 }
@@ -2123,14 +2147,20 @@ NodeParser.prototype.paintNode = function(container) {
 };
 
 NodeParser.prototype.paintElement = function(container) {
+    // EK 2017-03-25: Added container to all .clip calls for transform (also in paintCheckbox/paintRadio, basically paintNode descendents).
     var bounds = container.parseBounds();
     this.renderer.clip(container.backgroundClip, function() {
         this.renderer.renderBackground(container, bounds, container.borders.borders.map(getWidth));
+    }, this, container);
+
+    // EK 2017-03-24: Add mask (opposite of clip) for rendering box-shadows.
+    this.renderer.mask(bounds, function() {
+        this.renderer.renderShadows(container, bounds);
     }, this);
 
     this.renderer.clip(container.clip, function() {
         this.renderer.renderBorders(container.borders.borders);
-    }, this);
+    }, this, container);
 
     this.renderer.clip(container.backgroundClip, function() {
         switch (container.node.nodeName) {
@@ -2160,7 +2190,7 @@ NodeParser.prototype.paintElement = function(container) {
             this.paintFormValue(container);
             break;
         }
-    }, this);
+    }, this, container);
 };
 
 NodeParser.prototype.paintCheckbox = function(container) {
@@ -2183,7 +2213,7 @@ NodeParser.prototype.paintCheckbox = function(container) {
             this.renderer.font(new Color('#424242'), 'normal', 'normal', 'bold', (size - 3) + "px", 'arial');
             this.renderer.text("\u2714", bounds.left + size / 6, bounds.top + size - 1);
         }
-    }, this);
+    }, this, container);
 };
 
 NodeParser.prototype.paintRadio = function(container) {
@@ -2255,7 +2285,7 @@ NodeParser.prototype.paintText = function(container) {
                 this.renderTextDecoration(container.parent, bounds, this.fontMetrics.getMetrics(family, size));
             }
         }, this);
-    }, this);
+    }, this, container.parent);
 };
 
 NodeParser.prototype.renderTextDecoration = function(container, bounds, metrics) {
@@ -2873,6 +2903,15 @@ Renderer.prototype.renderBackgroundColor = function(container, bounds) {
     }
 };
 
+// EK 2017-03-24: Add box-shadow rendering.
+Renderer.prototype.renderShadows = function(container, bounds) {
+    var boxShadow = container.css('boxShadow');
+    if (boxShadow !== 'none') {
+        var shadows = boxShadow.split(/,(?![^(]*\))/);
+        this.shadow(bounds.left, bounds.top, bounds.width, bounds.height, shadows);
+    }
+};
+
 Renderer.prototype.renderBorders = function(borders) {
     borders.forEach(this.renderBorder, this);
 };
@@ -2944,11 +2983,24 @@ var log = _dereq_('../log');
 function CanvasRenderer(width, height) {
     Renderer.apply(this, arguments);
     this.canvas = this.options.canvas || this.document.createElement("canvas");
+    this.ctx = this.canvas.getContext("2d");
     if (!this.options.canvas) {
-        this.canvas.width = width;
-        this.canvas.height = height;
+        // EK 2017-03-25: Add scale/dpi.
+        if (this.options.dpi) {
+			// Default canvas is 96dpi (1 CSS inch = 96px).
+            this.options.scale = this.options.dpi / 96;
+        }
+        if (this.options.scale) {
+            this.canvas.style.width = width + 'px';
+            this.canvas.style.height = height + 'px';
+            this.canvas.width = Math.floor(width * this.options.scale);
+            this.canvas.height = Math.floor(height * this.options.scale);
+            this.ctx.scale(this.options.scale, this.options.scale);
+        } else {
+            this.canvas.width = width;
+            this.canvas.height = height;
+        }
     }
-    this.ctx = this.canvas.getContext("2d");
     this.taintCtx = this.document.createElement("canvas").getContext("2d");
     this.ctx.textBaseline = "bottom";
     this.variables = {};
@@ -2966,6 +3018,49 @@ CanvasRenderer.prototype.rectangle = function(left, top, width, height, color) {
     this.setFillStyle(color).fillRect(left, top, width, height);
 };
 
+// EK 2017-03-24: Add boxShadow handling.
+CanvasRenderer.prototype.shadow = function(left, top, width, height, shadows) {
+    var parseShadow = function(str) {
+        // Setup matching info.
+        var propertyFilters = { color: /^(#|rgb|hsl|(?!(inset|initial|inherit))\D+)/i, inset: /^inset/i, px: /px$/i };
+        var pxPropertyNames = [ 'x', 'y', 'blur', 'spread' ];
+
+        // Extract info from the string.
+        var properties = str.split(/ (?![^(]*\))/);
+        var info = {};
+        for (var key in propertyFilters) {
+            info[key] = properties.filter(propertyFilters[key].test.bind(propertyFilters[key]));
+            info[key] = info[key].length === 0 ? null : info[key].length === 1 ? info[key][0] : info[key];
+        }
+        for (var i=0; i<info.px.length; i++) {
+            info[pxPropertyNames[i]] = parseInt(info.px[i]);
+        }
+
+        // Return the info object.
+        return info;
+    }
+    var drawShadow = function(shadow) {
+        var info = parseShadow(shadow);
+		if (!info.inset) {
+			context.shadowOffsetX = info.x;
+			context.shadowOffsetY = info.y;
+			context.shadowColor = info.color;
+			context.shadowBlur = info.blur;
+			context.fill();
+		}
+    }
+
+    // Create a bounding rectangle with arbitrary opaque color.
+    var context = this.setFillStyle('white');
+    context.save();
+    context.beginPath();
+    context.rect(left, top, width, height);
+
+    // Create each shadow and restore the context.
+    shadows.forEach(drawShadow, this);
+    context.restore();
+};
+
 CanvasRenderer.prototype.circle = function(left, top, size, color) {
     this.setFillStyle(color);
     this.ctx.beginPath();
@@ -3006,11 +3101,31 @@ CanvasRenderer.prototype.drawImage = function(imageContainer, sx, sy, sw, sh, dx
     }
 };
 
-CanvasRenderer.prototype.clip = function(shapes, callback, context) {
+CanvasRenderer.prototype.clip = function(shapes, callback, context, container) {
+    // EK 2017-03-25: Clip transform fix.
+    var hasTransform = container && container.hasTransform();
     this.ctx.save();
+    if (hasTransform) {
+        this.setTransform(container.inverseTransform());
+    }
     shapes.filter(hasEntries).forEach(function(shape) {
         this.shape(shape).clip();
     }, this);
+    if (hasTransform) {
+        this.setTransform(container.parseTransform());
+    }
+    callback.call(context);
+    this.ctx.restore();
+};
+
+// EK 2017-03-24: Add mask (opposite of clip) for rendering box-shadows.
+CanvasRenderer.prototype.mask = function(bounds, callback, context) {
+    var canvasBorderCCW = ["rect", this.canvas.width, 0, -this.canvas.width, this.canvas.height];
+    var boundsCW = ["rect", bounds.left, bounds.top, bounds.width, bounds.height];
+
+    this.ctx.save();
+    var shape = [canvasBorderCCW, boundsCW];
+    this.shape(shape).clip();
     callback.call(context);
     this.ctx.restore();
 };
@@ -3027,6 +3142,17 @@ CanvasRenderer.prototype.shape = function(shape) {
     this.ctx.closePath();
     return this.ctx;
 };
+CanvasRenderer.prototype.shape2 = function(shape) {
+    this.ctx.beginPath();
+    shape.forEach(function(point, index) {
+        if (point[0] === "rect") {
+            this.ctx.rect.apply(this.ctx, point.slice(1));
+        } else {
+            this.ctx[(index === 0) ? "moveTo" : point[0] + "To" ].apply(this.ctx, point.slice(1));
+        }
+    }, this);
+    return this.ctx;
+};
 
 CanvasRenderer.prototype.font = function(color, style, variant, weight, size, family) {
     this.setFillStyle(color).font = [style, variant, weight, size, family].join(" ").split(",")[0];