Correctly render input[type="password"] value

This commit is contained in:
Niklas von Hertzen
2015-01-05 21:36:53 +02:00
parent e363f3813e
commit 498527918c
10 changed files with 107 additions and 18 deletions

View File

@ -16,6 +16,7 @@ window.html2canvas = function(nodeList, options) {
options.removeContainer = typeof(options.removeContainer) === "undefined" ? true : options.removeContainer;
options.javascriptEnabled = typeof(options.javascriptEnabled) === "undefined" ? false : options.javascriptEnabled;
options.imageTimeout = typeof(options.imageTimeout) === "undefined" ? 10000 : options.imageTimeout;
options.renderer = typeof(options.renderer) === "function" ? options.renderer : CanvasRenderer;
if (typeof(nodeList) === "string") {
if (typeof(options.proxy) !== "string") {
@ -62,7 +63,7 @@ function renderWindow(node, container, options, windowWidth, windowHeight) {
var bounds = getBounds(node);
var width = options.type === "view" ? windowWidth : documentWidth(clonedWindow.document);
var height = options.type === "view" ? windowHeight : documentHeight(clonedWindow.document);
var renderer = new CanvasRenderer(width, height, imageLoader, options, document);
var renderer = new options.renderer(width, height, imageLoader, options, document);
var parser = new NodeParser(node, renderer, support, imageLoader, options);
return parser.ready.then(function() {
log("Finished rendering");

View File

@ -244,7 +244,11 @@ NodeContainer.prototype.hasTransform = function() {
NodeContainer.prototype.getValue = function() {
var value = this.node.value || "";
value = (this.node.tagName === "SELECT") ? selectionValue(this.node) : value;
if (this.node.tagName === "SELECT") {
value = selectionValue(this.node);
} else if (this.node.type === "password") {
value = Array(value.length + 1).join('\u2022'); // jshint ignore:line
}
return value.length === 0 ? (this.node.placeholder || "") : value;
};

View File

@ -7,6 +7,9 @@ function NodeParser(element, renderer, support, imageLoader, options) {
this.renderQueue = [];
this.stack = new StackingContext(true, 1, element.ownerDocument, null);
var parent = new NodeContainer(element, null);
if (options.background) {
renderer.rectangle(0, 0, renderer.width, renderer.height, new Color(options.background));
}
if (element === element.ownerDocument.documentElement) {
// http://www.w3.org/TR/css3-background/#special-backgrounds
var canvasBackground = new NodeContainer(parent.color('backgroundColor').isTransparent() ? element.ownerDocument.body : element.ownerDocument.documentElement, null);
@ -283,6 +286,9 @@ NodeParser.prototype.paint = function(container) {
}
} catch(e) {
log(e);
if (this.options.strict) {
throw e;
}
}
};

View File

@ -6,9 +6,6 @@ function CanvasRenderer(width, height) {
this.canvas.height = height;
}
this.ctx = this.canvas.getContext("2d");
if (this.options.background) {
this.rectangle(0, 0, width, height, new Color(this.options.background));
}
this.taintCtx = this.document.createElement("canvas").getContext("2d");
this.ctx.textBaseline = "bottom";
this.variables = {};
@ -18,7 +15,7 @@ function CanvasRenderer(width, height) {
CanvasRenderer.prototype = Object.create(Renderer.prototype);
CanvasRenderer.prototype.setFillStyle = function(fillStyle) {
this.ctx.fillStyle = (fillStyle instanceof Color) ? fillStyle.toString() : fillStyle;
this.ctx.fillStyle = typeof(fillStyle) === "object" ? fillStyle.toString() : fillStyle;
return this.ctx;
};