mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

Fix IE misalignment of content after scroll

Browse Source
This commit is contained in:
Niklas von Hertzen 2014-03-02 18:03:30 +02:00
parent 7ce46e95cd
commit 9bae5b610a
4 changed files with 81 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
build/html2canvas.js
View File

@ -95,14 +95,29 @@ function createWindowClone(ownerDocument, width, height, options) {
documentClone.write("<!DOCTYPE html>"); documentClone.write("<!DOCTYPE html>");
documentClone.close(); documentClone.close();
documentClone.replaceChild(documentClone.adoptNode(documentElement), documentClone.documentElement); documentClone.replaceChild(removeScriptNodes(documentClone.adoptNode(documentElement)), documentClone.documentElement);
if (options.type === "view") { if (options.type === "view") {
container.contentWindow.scrollTo(window.scrollX, window.scrollY); container.contentWindow.scrollTo(window.pageXOffset, window.pageYOffset);
} }
resolve(container); resolve(container);
}); });
} }
function removeScriptNodes(parent) {
[].slice.call(parent.childNodes, 0).filter(isElementNode).forEach(function(node) {
if (node.tagName === "SCRIPT") {
parent.removeChild(node);
} else {
removeScriptNodes(node);
}
});
return parent;
}
function isElementNode(node) {
return node.nodeType === Node.ELEMENT_NODE;
}
function Font(family, size) { function Font(family, size) {
var container = document.createElement('div'), var container = document.createElement('div'),
img = document.createElement('img'), img = document.createElement('img'),
@ -334,7 +349,7 @@ LinearGradientContainer.prototype.stepRegExp = /((?:rgb|rgba)\(\d{1,3},\s\d{1,3}
function log() { function log() {
if (window.html2canvas.logging && window.console && window.console.log) { if (window.html2canvas.logging && window.console && window.console.log) {
window.console.log.apply(window.console, [(Date.now() - window.html2canvas.start) + "ms", "html2canvas:"].concat([].slice.call(arguments, 0))); Function.prototype.bind.call(window.console.log, (window.console)).apply(window.console, [(Date.now() - window.html2canvas.start) + "ms", "html2canvas:"].concat([].slice.call(arguments, 0)));
} }
} }
@ -348,6 +363,8 @@ function NodeContainer(node, parent) {
this.computedStyles = null; this.computedStyles = null;
this.styles = {}; this.styles = {};
this.backgroundImages = null; this.backgroundImages = null;
this.transformData = null;
this.transformMatrix = null;
} }
NodeContainer.prototype.assignStack = function(stack) { NodeContainer.prototype.assignStack = function(stack) {
@ -499,32 +516,44 @@ NodeContainer.prototype.parseTextShadows = function() {
}; };
NodeContainer.prototype.parseTransform = function() { NodeContainer.prototype.parseTransform = function() {
var transformRegExp = /(matrix)\((.+)\)/; if (!this.transformData) {
var transform = this.prefixedCss("transform"); if (this.hasTransform()) {
var matrix = parseMatrix(transform.match(transformRegExp)); var offset = this.parseBounds();
var offset = this.parseBounds(); var origin = this.prefixedCss("transformOrigin").split(" ").map(removePx).map(asFloat);
if (matrix) { origin[0] += offset.left;
var origin = this.prefixedCss("transformOrigin").split(" ").map(removePx).map(asFloat); origin[1] += offset.top;
origin[0] += offset.left; this.transformData = {
origin[1] += offset.top; origin: origin,
matrix: this.parseTransformMatrix()
return { };
origin: origin, } else {
matrix: matrix this.transformData = {
}; origin: [0, 0],
matrix: [1, 0, 0, 1, 0, 0]
};
}
} }
return this.transformData;
};
NodeContainer.prototype.parseTransformMatrix = function() {
if (!this.transformMatrix) {
var transform = this.prefixedCss("transform");
var matrix = transform ? parseMatrix(transform.match(this.MATRIX_PROPERTY)) : null;
this.transformMatrix = matrix ? matrix : [1, 0, 0, 1, 0, 0];
}
return this.transformMatrix;
}; };
NodeContainer.prototype.parseBounds = function() { NodeContainer.prototype.parseBounds = function() {
return this.bounds || (this.bounds = this.hasTransform() ? offsetBounds(this.node) : getBounds(this.node)); return this.bounds || (this.bounds = this.hasTransform() ? offsetBounds(this.node) : getBounds(this.node));
}; };
NodeContainer.prototype.hasTransform = function() { NodeContainer.prototype.hasTransform = function() {
var transform = this.prefixedCss("transform"); return this.parseTransformMatrix().join(",") !== "1,0,0,1,0,0";
return (transform !== null && transform !== "none" && transform !== "matrix(1, 0, 0, 1, 0, 0)");
}; };
NodeContainer.prototype.MATRIX_PROPERTY = /(matrix)\((.+)\)/;
NodeContainer.prototype.TEXT_SHADOW_PROPERTY = /((rgba|rgb)\([^\)]+\)(\s-?\d+px){0,})/g; NodeContainer.prototype.TEXT_SHADOW_PROPERTY = /((rgba|rgb)\([^\)]+\)(\s-?\d+px){0,})/g;
NodeContainer.prototype.TEXT_SHADOW_VALUES = /(-?\d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g; NodeContainer.prototype.TEXT_SHADOW_VALUES = /(-?\d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g;

4
build/html2canvas.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
src/core.js
View File

@ -88,7 +88,7 @@ function createWindowClone(ownerDocument, width, height, options) {
documentClone.replaceChild(removeScriptNodes(documentClone.adoptNode(documentElement)), documentClone.documentElement); documentClone.replaceChild(removeScriptNodes(documentClone.adoptNode(documentElement)), documentClone.documentElement);
if (options.type === "view") { if (options.type === "view") {
container.contentWindow.scrollTo(window.scrollX, window.scrollY); container.contentWindow.scrollTo(window.pageXOffset, window.pageYOffset);
} }
resolve(container); resolve(container);
}); });

46
src/nodecontainer.js
View File

@ -8,6 +8,8 @@ function NodeContainer(node, parent) {
this.computedStyles = null; this.computedStyles = null;
this.styles = {}; this.styles = {};
this.backgroundImages = null; this.backgroundImages = null;
this.transformData = null;
this.transformMatrix = null;
} }
NodeContainer.prototype.assignStack = function(stack) { NodeContainer.prototype.assignStack = function(stack) {
@ -159,32 +161,44 @@ NodeContainer.prototype.parseTextShadows = function() {
}; };
NodeContainer.prototype.parseTransform = function() { NodeContainer.prototype.parseTransform = function() {
var transformRegExp = /(matrix)\((.+)\)/; if (!this.transformData) {
var transform = this.prefixedCss("transform"); if (this.hasTransform()) {
var matrix = parseMatrix(transform.match(transformRegExp)); var offset = this.parseBounds();
var offset = this.parseBounds(); var origin = this.prefixedCss("transformOrigin").split(" ").map(removePx).map(asFloat);
if (matrix) { origin[0] += offset.left;
var origin = this.prefixedCss("transformOrigin").split(" ").map(removePx).map(asFloat); origin[1] += offset.top;
origin[0] += offset.left; this.transformData = {
origin[1] += offset.top; origin: origin,
matrix: this.parseTransformMatrix()
return { };
origin: origin, } else {
matrix: matrix this.transformData = {
}; origin: [0, 0],
matrix: [1, 0, 0, 1, 0, 0]
};
}
} }
return this.transformData;
};
NodeContainer.prototype.parseTransformMatrix = function() {
if (!this.transformMatrix) {
var transform = this.prefixedCss("transform");
var matrix = transform ? parseMatrix(transform.match(this.MATRIX_PROPERTY)) : null;
this.transformMatrix = matrix ? matrix : [1, 0, 0, 1, 0, 0];
}
return this.transformMatrix;
}; };
NodeContainer.prototype.parseBounds = function() { NodeContainer.prototype.parseBounds = function() {
return this.bounds || (this.bounds = this.hasTransform() ? offsetBounds(this.node) : getBounds(this.node)); return this.bounds || (this.bounds = this.hasTransform() ? offsetBounds(this.node) : getBounds(this.node));
}; };
NodeContainer.prototype.hasTransform = function() { NodeContainer.prototype.hasTransform = function() {
var transform = this.prefixedCss("transform"); return this.parseTransformMatrix().join(",") !== "1,0,0,1,0,0";
return (transform !== null && transform !== "none" && transform !== "matrix(1, 0, 0, 1, 0, 0)");
}; };
NodeContainer.prototype.MATRIX_PROPERTY = /(matrix)\((.+)\)/;
NodeContainer.prototype.TEXT_SHADOW_PROPERTY = /((rgba|rgb)\([^\)]+\)(\s-?\d+px){0,})/g; NodeContainer.prototype.TEXT_SHADOW_PROPERTY = /((rgba|rgb)\([^\)]+\)(\s-?\d+px){0,})/g;
NodeContainer.prototype.TEXT_SHADOW_VALUES = /(-?\d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g; NodeContainer.prototype.TEXT_SHADOW_VALUES = /(-?\d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g;