mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
initial commit for transforms
This commit is contained in:
parent
c9e2fc27c8
commit
57028ab423
91
src/Parse.js
91
src/Parse.js
@ -4,10 +4,11 @@ _html2canvas.Parse = function (images, options) {
|
|||||||
var element = (( options.elements === undefined ) ? document.body : options.elements[0]), // select body by default
|
var element = (( options.elements === undefined ) ? document.body : options.elements[0]), // select body by default
|
||||||
numDraws = 0,
|
numDraws = 0,
|
||||||
doc = element.ownerDocument,
|
doc = element.ownerDocument,
|
||||||
support = _html2canvas.Util.Support(options, doc),
|
Util = _html2canvas.Util,
|
||||||
|
support = Util.Support(options, doc),
|
||||||
ignoreElementsRegExp = new RegExp("(" + options.ignoreElements + ")"),
|
ignoreElementsRegExp = new RegExp("(" + options.ignoreElements + ")"),
|
||||||
body = doc.body,
|
body = doc.body,
|
||||||
getCSS = _html2canvas.Util.getCSS,
|
getCSS = Util.getCSS,
|
||||||
pseudoHide = "___html2canvas___pseudoelement",
|
pseudoHide = "___html2canvas___pseudoelement",
|
||||||
hidePseudoElements = doc.createElement('style');
|
hidePseudoElements = doc.createElement('style');
|
||||||
|
|
||||||
@ -69,7 +70,7 @@ _html2canvas.Parse = function (images, options) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function drawText(currentText, x, y, ctx){
|
function drawText(currentText, x, y, ctx){
|
||||||
if (currentText !== null && _html2canvas.Util.trimText(currentText).length > 0) {
|
if (currentText !== null && Util.trimText(currentText).length > 0) {
|
||||||
ctx.fillText(currentText, x, y);
|
ctx.fillText(currentText, x, y);
|
||||||
numDraws+=1;
|
numDraws+=1;
|
||||||
}
|
}
|
||||||
@ -80,7 +81,7 @@ _html2canvas.Parse = function (images, options) {
|
|||||||
bold = getCSS(el, "fontWeight"),
|
bold = getCSS(el, "fontWeight"),
|
||||||
family = getCSS(el, "fontFamily"),
|
family = getCSS(el, "fontFamily"),
|
||||||
size = getCSS(el, "fontSize"),
|
size = getCSS(el, "fontSize"),
|
||||||
shadows = _html2canvas.Util.parseTextShadows(getCSS(el, "textShadow"));
|
shadows = Util.parseTextShadows(getCSS(el, "textShadow"));
|
||||||
|
|
||||||
switch(parseInt(bold, 10)){
|
switch(parseInt(bold, 10)){
|
||||||
case 401:
|
case 401:
|
||||||
@ -105,7 +106,7 @@ _html2canvas.Parse = function (images, options) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (text_decoration !== "none"){
|
if (text_decoration !== "none"){
|
||||||
return _html2canvas.Util.Font(family, size, doc);
|
return Util.Font(family, size, doc);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -129,7 +130,7 @@ _html2canvas.Parse = function (images, options) {
|
|||||||
function getTextBounds(state, text, textDecoration, isLast) {
|
function getTextBounds(state, text, textDecoration, isLast) {
|
||||||
var bounds;
|
var bounds;
|
||||||
if (support.rangeBounds) {
|
if (support.rangeBounds) {
|
||||||
if (textDecoration !== "none" || _html2canvas.Util.trimText(text).length !== 0) {
|
if (textDecoration !== "none" || Util.trimText(text).length !== 0) {
|
||||||
bounds = textRangeBounds(text, state.node, state.textOffset);
|
bounds = textRangeBounds(text, state.node, state.textOffset);
|
||||||
}
|
}
|
||||||
state.textOffset += text.length;
|
state.textOffset += text.length;
|
||||||
@ -156,7 +157,7 @@ _html2canvas.Parse = function (images, options) {
|
|||||||
wrapElement.appendChild(oldTextNode.cloneNode(true));
|
wrapElement.appendChild(oldTextNode.cloneNode(true));
|
||||||
parent.replaceChild(wrapElement, oldTextNode);
|
parent.replaceChild(wrapElement, oldTextNode);
|
||||||
|
|
||||||
var bounds = _html2canvas.Util.Bounds(wrapElement);
|
var bounds = Util.Bounds(wrapElement);
|
||||||
parent.replaceChild(backupText, wrapElement);
|
parent.replaceChild(backupText, wrapElement);
|
||||||
return bounds;
|
return bounds;
|
||||||
}
|
}
|
||||||
@ -173,7 +174,7 @@ _html2canvas.Parse = function (images, options) {
|
|||||||
textOffset: 0
|
textOffset: 0
|
||||||
};
|
};
|
||||||
|
|
||||||
if (_html2canvas.Util.trimText(textNode.nodeValue).length > 0) {
|
if (Util.trimText(textNode.nodeValue).length > 0) {
|
||||||
textNode.nodeValue = textTransform(textNode.nodeValue, getCSS(el, "textTransform"));
|
textNode.nodeValue = textTransform(textNode.nodeValue, getCSS(el, "textTransform"));
|
||||||
textAlign = textAlign.replace(["-webkit-auto"],["auto"]);
|
textAlign = textAlign.replace(["-webkit-auto"],["auto"]);
|
||||||
|
|
||||||
@ -217,7 +218,7 @@ _html2canvas.Parse = function (images, options) {
|
|||||||
|
|
||||||
element.insertBefore(boundElement, element.firstChild);
|
element.insertBefore(boundElement, element.firstChild);
|
||||||
|
|
||||||
bounds = _html2canvas.Util.Bounds(boundElement);
|
bounds = Util.Bounds(boundElement);
|
||||||
element.removeChild(boundElement);
|
element.removeChild(boundElement);
|
||||||
element.style.listStyleType = originalType;
|
element.style.listStyleType = originalType;
|
||||||
return bounds;
|
return bounds;
|
||||||
@ -795,7 +796,7 @@ _html2canvas.Parse = function (images, options) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
if(isImage) {
|
if(isImage) {
|
||||||
elps.src = _html2canvas.Util.parseBackgroundImage(content)[0].args[0];
|
elps.src = Util.parseBackgroundImage(content)[0].args[0];
|
||||||
} else {
|
} else {
|
||||||
elps.innerHTML = content;
|
elps.innerHTML = content;
|
||||||
}
|
}
|
||||||
@ -866,11 +867,9 @@ _html2canvas.Parse = function (images, options) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function renderBackgroundRepeating(el, bounds, ctx, image, imageIndex) {
|
function renderBackgroundRepeating(el, bounds, ctx, image, imageIndex) {
|
||||||
var backgroundSize = _html2canvas.Util.BackgroundSize(el, bounds, image, imageIndex),
|
var backgroundSize = Util.BackgroundSize(el, bounds, image, imageIndex),
|
||||||
backgroundPosition = _html2canvas.Util.BackgroundPosition(el, bounds, image, imageIndex, backgroundSize),
|
backgroundPosition = Util.BackgroundPosition(el, bounds, image, imageIndex, backgroundSize),
|
||||||
backgroundRepeat = getCSS(el, "backgroundRepeat").split(",").map(function(value) {
|
backgroundRepeat = getCSS(el, "backgroundRepeat").split(",").map(Util.trimText);
|
||||||
return value.trim();
|
|
||||||
});
|
|
||||||
|
|
||||||
image = resizeImage(image, backgroundSize);
|
image = resizeImage(image, backgroundSize);
|
||||||
|
|
||||||
@ -905,7 +904,7 @@ _html2canvas.Parse = function (images, options) {
|
|||||||
|
|
||||||
function renderBackgroundImage(element, bounds, ctx) {
|
function renderBackgroundImage(element, bounds, ctx) {
|
||||||
var backgroundImage = getCSS(element, "backgroundImage"),
|
var backgroundImage = getCSS(element, "backgroundImage"),
|
||||||
backgroundImages = _html2canvas.Util.parseBackgroundImage(backgroundImage),
|
backgroundImages = Util.parseBackgroundImage(backgroundImage),
|
||||||
image,
|
image,
|
||||||
imageIndex = backgroundImages.length;
|
imageIndex = backgroundImages.length;
|
||||||
|
|
||||||
@ -945,20 +944,39 @@ _html2canvas.Parse = function (images, options) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function setOpacity(ctx, element, parentStack) {
|
function setOpacity(ctx, element, parentStack) {
|
||||||
var opacity = getCSS(element, "opacity") * ((parentStack) ? parentStack.opacity : 1);
|
return ctx.setVariable("globalAlpha", getCSS(element, "opacity") * ((parentStack) ? parentStack.opacity : 1));
|
||||||
ctx.setVariable("globalAlpha", opacity);
|
}
|
||||||
return opacity;
|
|
||||||
|
function setTransform(ctx, element, parentStack) {
|
||||||
|
var transform = getCSS(element, "transform") || getCSS(element, "-webkit-transform") || getCSS(element, "-moz-transform") || getCSS(element, "-ms-transform") || getCSS(element, "-o-transform");
|
||||||
|
var transformOrigin = getCSS(element, "transform-origin") || getCSS(element, "-webkit-transform-origin") || getCSS(element, "-moz-transform-origin") || getCSS(element, "-ms-transform-origin") || getCSS(element, "-o-transform-origin");
|
||||||
|
|
||||||
|
var matrix;
|
||||||
|
var TRANSFORM_REGEXP = /(matrix)\((.+)\)/;
|
||||||
|
if (transform && transform !== "none") {
|
||||||
|
var match = transform.match(TRANSFORM_REGEXP);
|
||||||
|
switch(match[1]) {
|
||||||
|
case "matrix":
|
||||||
|
matrix = match[2].split(",").map(Util.trimText).map(Util.asFloat);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
origin: transformOrigin,
|
||||||
|
matrix: matrix
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
function createStack(element, parentStack, bounds) {
|
function createStack(element, parentStack, bounds) {
|
||||||
|
|
||||||
var ctx = h2cRenderContext((!parentStack) ? documentWidth() : bounds.width , (!parentStack) ? documentHeight() : bounds.height),
|
var ctx = h2cRenderContext((!parentStack) ? documentWidth() : bounds.width , (!parentStack) ? documentHeight() : bounds.height),
|
||||||
stack = {
|
stack = {
|
||||||
ctx: ctx,
|
ctx: ctx,
|
||||||
opacity: setOpacity(ctx, element, parentStack),
|
opacity: setOpacity(ctx, element, parentStack),
|
||||||
cssPosition: getCSS(element, "position"),
|
cssPosition: getCSS(element, "position"),
|
||||||
borders: getBorderData(element),
|
borders: getBorderData(element),
|
||||||
clip: (parentStack && parentStack.clip) ? _html2canvas.Util.Extend( {}, parentStack.clip ) : null
|
transform: setTransform(ctx, element, parentStack),
|
||||||
|
clip: (parentStack && parentStack.clip) ? Util.Extend( {}, parentStack.clip ) : null
|
||||||
};
|
};
|
||||||
|
|
||||||
setZ(element, stack, parentStack);
|
setZ(element, stack, parentStack);
|
||||||
@ -987,7 +1005,7 @@ _html2canvas.Parse = function (images, options) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function renderElement(element, parentStack, pseudoElement){
|
function renderElement(element, parentStack, pseudoElement){
|
||||||
var bounds = _html2canvas.Util.Bounds(element),
|
var bounds = Util.Bounds(element),
|
||||||
image,
|
image,
|
||||||
bgcolor = (ignoreElementsRegExp.test(element.nodeName)) ? "#efefef" : getCSS(element, "backgroundColor"),
|
bgcolor = (ignoreElementsRegExp.test(element.nodeName)) ? "#efefef" : getCSS(element, "backgroundColor"),
|
||||||
stack = createStack(element, parentStack, bounds),
|
stack = createStack(element, parentStack, bounds),
|
||||||
@ -1056,33 +1074,28 @@ _html2canvas.Parse = function (images, options) {
|
|||||||
return (getCSS(element, 'display') !== "none" && getCSS(element, 'visibility') !== "hidden" && !element.hasAttribute("data-html2canvas-ignore"));
|
return (getCSS(element, 'display') !== "none" && getCSS(element, 'visibility') !== "hidden" && !element.hasAttribute("data-html2canvas-ignore"));
|
||||||
}
|
}
|
||||||
|
|
||||||
function parseElement (el, stack, pseudoElement) {
|
function parseElement (element, stack, pseudoElement) {
|
||||||
|
if (isElementVisible(element)) {
|
||||||
if (isElementVisible(el)) {
|
stack = renderElement(element, stack, pseudoElement) || stack;
|
||||||
stack = renderElement(el, stack, pseudoElement) || stack;
|
if (!ignoreElementsRegExp.test(element.nodeName)) {
|
||||||
if (!ignoreElementsRegExp.test(el.nodeName)) {
|
parseChildren(element, stack, pseudoElement);
|
||||||
_html2canvas.Util.Children(el).forEach(function(node) {
|
|
||||||
if (node.nodeType === 1) {
|
|
||||||
parseElement(node, stack, pseudoElement);
|
|
||||||
} else if (node.nodeType === 3) {
|
|
||||||
renderText(el, node, stack);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function init() {
|
function parseChildren(element, stack, pseudoElement) {
|
||||||
var stack = renderElement(element, null);
|
Util.Children(element).forEach(function(node) {
|
||||||
|
|
||||||
_html2canvas.Util.Children(element).forEach(function(node) {
|
|
||||||
if (node.nodeType === 1) {
|
if (node.nodeType === 1) {
|
||||||
parseElement(node, stack);
|
parseElement(node, stack, pseudoElement);
|
||||||
} else if (node.nodeType === 3) {
|
} else if (node.nodeType === 3) {
|
||||||
renderText(element, node, stack);
|
renderText(element, node, stack);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
var stack = renderElement(element, null);
|
||||||
|
parseChildren(element, stack);
|
||||||
stack.backgroundColor = getCSS(document.documentElement, "backgroundColor");
|
stack.backgroundColor = getCSS(document.documentElement, "backgroundColor");
|
||||||
body.removeChild(hidePseudoElements);
|
body.removeChild(hidePseudoElements);
|
||||||
return stack;
|
return stack;
|
||||||
|
@ -117,6 +117,7 @@ function h2cRenderContext(width, height) {
|
|||||||
name: variable,
|
name: variable,
|
||||||
'arguments': value
|
'arguments': value
|
||||||
});
|
});
|
||||||
|
return value;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
@ -1,5 +1,4 @@
|
|||||||
_html2canvas.Renderer.Canvas = function(options) {
|
_html2canvas.Renderer.Canvas = function(options) {
|
||||||
|
|
||||||
options = options || {};
|
options = options || {};
|
||||||
|
|
||||||
var doc = document,
|
var doc = document,
|
||||||
@ -8,7 +7,6 @@ _html2canvas.Renderer.Canvas = function(options) {
|
|||||||
testctx = testCanvas.getContext("2d"),
|
testctx = testCanvas.getContext("2d"),
|
||||||
canvas = options.canvas || doc.createElement('canvas');
|
canvas = options.canvas || doc.createElement('canvas');
|
||||||
|
|
||||||
|
|
||||||
function createShape(ctx, args) {
|
function createShape(ctx, args) {
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
args.forEach(function(arg) {
|
args.forEach(function(arg) {
|
||||||
@ -66,12 +64,9 @@ _html2canvas.Renderer.Canvas = function(options) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return function(zStack, options, doc, queue, _html2canvas) {
|
return function(zStack, options, document, queue, _html2canvas) {
|
||||||
|
|
||||||
var ctx = canvas.getContext("2d"),
|
var ctx = canvas.getContext("2d"),
|
||||||
storageContext,
|
render = renderItem.bind(null, ctx),
|
||||||
i,
|
|
||||||
queueLen,
|
|
||||||
newCanvas,
|
newCanvas,
|
||||||
bounds,
|
bounds,
|
||||||
fstyle;
|
fstyle;
|
||||||
@ -84,40 +79,35 @@ _html2canvas.Renderer.Canvas = function(options) {
|
|||||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
ctx.fillStyle = fstyle;
|
ctx.fillStyle = fstyle;
|
||||||
|
|
||||||
|
queue.forEach(function(storageContext) {
|
||||||
|
// set common settings for canvas
|
||||||
|
ctx.textBaseline = "bottom";
|
||||||
|
ctx.save();
|
||||||
|
|
||||||
for ( i = 0, queueLen = queue.length; i < queueLen; i+=1 ) {
|
if (storageContext.transform.matrix) {
|
||||||
storageContext = queue.splice(0, 1)[0];
|
ctx.transform.apply(ctx, storageContext.transform.matrix);
|
||||||
storageContext.canvasPosition = storageContext.canvasPosition || {};
|
|
||||||
|
|
||||||
// set common settings for canvas
|
|
||||||
ctx.textBaseline = "bottom";
|
|
||||||
|
|
||||||
if (storageContext.clip){
|
|
||||||
ctx.save();
|
|
||||||
ctx.beginPath();
|
|
||||||
// console.log(storageContext);
|
|
||||||
ctx.rect(storageContext.clip.left, storageContext.clip.top, storageContext.clip.width, storageContext.clip.height);
|
|
||||||
ctx.clip();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (storageContext.ctx.storage) {
|
|
||||||
storageContext.ctx.storage.forEach(renderItem.bind(null, ctx));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (storageContext.clip){
|
|
||||||
ctx.restore();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (storageContext.clip){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.rect(storageContext.clip.left, storageContext.clip.top, storageContext.clip.width, storageContext.clip.height);
|
||||||
|
ctx.clip();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (storageContext.ctx.storage) {
|
||||||
|
storageContext.ctx.storage.forEach(render);
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.restore();
|
||||||
|
});
|
||||||
|
|
||||||
h2clog("html2canvas: Renderer: Canvas renderer done - returning canvas obj");
|
h2clog("html2canvas: Renderer: Canvas renderer done - returning canvas obj");
|
||||||
|
|
||||||
queueLen = options.elements.length;
|
if (options.elements.length === 1) {
|
||||||
|
|
||||||
if (queueLen === 1) {
|
|
||||||
if (typeof options.elements[0] === "object" && options.elements[0].nodeName !== "BODY") {
|
if (typeof options.elements[0] === "object" && options.elements[0].nodeName !== "BODY") {
|
||||||
// crop image to the bounds of selected (single) element
|
// crop image to the bounds of selected (single) element
|
||||||
bounds = _html2canvas.Util.Bounds(options.elements[0]);
|
bounds = _html2canvas.Util.Bounds(options.elements[0]);
|
||||||
newCanvas = doc.createElement('canvas');
|
newCanvas = document.createElement('canvas');
|
||||||
newCanvas.width = bounds.width;
|
newCanvas.width = bounds.width;
|
||||||
newCanvas.height = bounds.height;
|
newCanvas.height = bounds.height;
|
||||||
ctx = newCanvas.getContext("2d");
|
ctx = newCanvas.getContext("2d");
|
||||||
|
Loading…
x
Reference in New Issue
Block a user