Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Render element regardless of its position on the page #88

Closed
wants to merge 3 commits into from

2 participants

@OneGeek

Added options.renderRootAtOrigin flag, when set to true the element being rendered will be rendered at 0,0 instead of at its actual page position. However, as it is now the resulting image will be the full page's dimensions instead of the target element's.

Haven't yet figured out exactly where the final image size is determined, so the resulting image needs to be cropped. Not sure what will happen if the element to be rendered is taller than whatever size is currently chosen for the image.

@OneGeek OneGeek Added options.renderRootAtOrigin flag, when set to true the element b…
…eing rendered will be rendered at 0,0 instead of at its actual page position. However, as it is now the resulting image will be the full page's dimensions instead of the target element's.
74f5b67
@OneGeek

Need to figure out how to modify the rangebounds generation to offset correctly with this flag.

@OneGeek

Haven't yet figured out exactly where the final image size is determined, so the resulting image needs to be cropped. Not sure what will happen if the element to be rendered is taller than whatever size is currently chosen for the image.

@OneGeek

Darn, screwed something up, working on fixing it.

@OneGeek

Nevermind, it works fine, I had stopped including jquery by mistake

@niklasvh
Owner

Thanks for the pull request. However, I am bit confused as to how this is different from using a specific element to render as in 0cb252a / http://html2canvas.hertzen.com/tests/origin.html ?

@OneGeek
@niklasvh niklasvh closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Apr 3, 2012
  1. @OneGeek

    Added options.renderRootAtOrigin flag, when set to true the element b…

    OneGeek authored
    …eing rendered will be rendered at 0,0 instead of at its actual page position. However, as it is now the resulting image will be the full page's dimensions instead of the target element's.
  2. @OneGeek
  3. @OneGeek
This page is out of date. Refresh to see the latest.
Showing with 23 additions and 11 deletions.
  1. +13 −5 src/Core.js
  2. +4 −4 src/Parse.js
  3. +6 −2 src/renderers/Canvas.js
View
18 src/Core.js
@@ -36,18 +36,26 @@ _html2canvas.Util.backgroundImage = function (src) {
return src;
};
-_html2canvas.Util.Bounds = function getBounds (el) {
+_html2canvas.Util.Bounds = function getBounds (el, elRelTo, options) {
var clientRect,
- bounds = {};
+ bounds = {},
+ relBounds = {top:0, left:0};
+
+ if (options.renderRootAtOrigin === true) {
+ var relRect = elRelTo.getBoundingClientRect();
+ relBounds.top = relRect.top;
+ relBounds.left = relRect.left;
+ }
+
if (el.getBoundingClientRect){
clientRect = el.getBoundingClientRect();
// TODO add scroll position to bounds, so no scrolling of window necessary
- bounds.top = clientRect.top;
- bounds.bottom = clientRect.bottom || (clientRect.top + clientRect.height);
- bounds.left = clientRect.left;
+ bounds.top = clientRect.top - relBounds.top;
+ bounds.bottom = (clientRect.bottom || (clientRect.top + clientRect.height)) - relBounds.top;
+ bounds.left = clientRect.left - relBounds.left;
// older IE doesn't have width/height, but top/bottom instead
bounds.width = clientRect.width || (clientRect.right - clientRect.left);
View
8 src/Parse.js
@@ -334,7 +334,7 @@ _html2canvas.Parse = function ( images, options ) {
- if (support.rangeBounds){
+ if (!options.renderRootAtOrigin && support.rangeBounds){
// getBoundingClientRect is supported for ranges
if (text_decoration !== "none" || trimText(renderList[c]).length !== 0) {
textValue = renderList[c];
@@ -372,7 +372,7 @@ _html2canvas.Parse = function ( images, options ) {
wrapElement.appendChild(oldTextNode.cloneNode(true));
parent.replaceChild(wrapElement, oldTextNode);
- bounds = _html2canvas.Util.Bounds(wrapElement);
+ bounds = _html2canvas.Util.Bounds(wrapElement, element, options);
textValue = oldTextNode.nodeValue;
@@ -434,7 +434,7 @@ _html2canvas.Parse = function ( images, options ) {
element.insertBefore(boundElement, element.firstChild);
- bounds = _html2canvas.Util.Bounds( boundElement );
+ bounds = _html2canvas.Util.Bounds( boundElement, element, options);
element.removeChild( boundElement );
element.style.listStyleType = type;
return bounds;
@@ -978,7 +978,7 @@ _html2canvas.Parse = function ( images, options ) {
function renderElement(el, parentStack){
- var bounds = _html2canvas.Util.Bounds(el),
+ var bounds = _html2canvas.Util.Bounds(el, element, options),
x = bounds.left,
y = bounds.top,
w = bounds.width,
View
8 src/renderers/Canvas.js
@@ -196,13 +196,17 @@ _html2canvas.Renderer.Canvas = function( options ) {
if (queueLen === 1) {
if (typeof options.elements[ 0 ] === "object" && options.elements[ 0 ].nodeName !== "BODY" && usingFlashcanvas === false) {
// crop image to the bounds of selected (single) element
- bounds = _html2canvas.Util.Bounds( options.elements[ 0 ] );
+ bounds = _html2canvas.Util.Bounds( options.elements[ 0 ], options.elements[ 0 ], options );
newCanvas = doc.createElement('canvas');
newCanvas.width = bounds.width;
newCanvas.height = bounds.height;
ctx = newCanvas.getContext("2d");
- ctx.drawImage( canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height );
+ if (options.renderRootAtOrigin) {
+ ctx.drawImage( canvas, 0, 0, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height );
+ }else {
+ ctx.drawImage( canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height );
+ }
canvas = null;
return newCanvas;
}
Something went wrong with that request. Please try again.