Html2canvas: Objects larger than screen are only rendered to the max screen size

[PaulMcGuinness]

Hi,

I discovered that objects (e.g. a DIV) larger than the screen (e.g. Shown with scroll-bars) would only render to the max dimensions of the screen.

Changing this line:-

return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight).then(function(canvas) 

to this:-

return renderDocument(node.ownerDocument, options, $(node).width(), $(node).height()).then(function(canvas)

resolves the issue.

[niklasvh]

A number of cropping issues were fixed with https://github.com/niklasvh/html2canvas/commit/7e13231807cb9882ad9558ecf4791ea145a41df9

[PaulMcGuinness]

Nope, that doesn't fix it.
You end up with the overall canvas being the correct height, but elements off-screen lost.
The attached image demonstrates this.
(If you load it into something like Paint.net, you'll see that after the last object, it is 'transparent')

[PaulMcGuinness]

This is what my change produces - II get the whole image, and transparency to the right of the object (which is the width of the parent container incidentally)

[niklasvh]

Which node are you rendering with html2canvas (i.e. what is the first argument when you call the html2canvas function). What options do you use with it?

If you are rendering some other element than document.documentElement what is the actual bounding box size of the element you are rendering?

There might be a bug here, I'm just trying to narrow down the case.

[PaulMcGuinness]

I literally just use:-

 html2canvas($("#" + div), {
                onrendered: function(canvas) {}
                                  ... });;

The 'div' name passed as the element is a easyUI TreeView in a easyUI Dialog, which looks something like this:-

<div id="amTreeInner" class="FPad5 FB_White FBlack F7 FTable2 FRounded5">
   <ul id="tcards_261" class="easyui-tree tree">
      <li>
              <div class="tree-node" node-id="_node_1" style="cursor: pointer;">
              <ul style="display: block;">
                 <li>stufff</li>
               </ul>
              .....   repeat ad-nauseum ..... 
       </li>
     </ul>
   </div>

The Dialog is 1012 x 538 (internal dimensions)

The #amTreeInner is 949 x 1764 (tree view)

[brcontainer]

onrendered ? You using 0.4.1 version (or I misunderstood)?
Use 0.5.0

Good luck!

[PaulMcGuinness]

I'm using 5.0, just using the deprecated method that's all ;-)

Kindest Regards,

Paul

Please excuse my brevity - I'm sending you this from my mobile phone.

On 20 Oct 2014 16:32, "Guilherme Nascimento" [email protected]
wrote:

onrendered ? You using 0.4.1 version (or I misunderstood)?
Use 0.5.0

Good luck!

—
Reply to this email directly or view it on GitHub
https://github.com/niklasvh/html2canvas/issues/461#issuecomment-59780231
.

[PaulMcGuinness]

I've attached a screenshot below to help, the treeview #amTreeInner is contained within that scrolling div in the dialog box.

That is the issue I believe, hence my use of $(node).width(), $(node).height() to get the element height, rather than the container height.

If anyone is interested, this web-app displays the complete configuration of a telephone system (an Avaya CM in this case)

[cenap]

Please fix this! It is an important issue!

[cenap]

Ok. I applied Lennyman's workaround without touching the html2canvas code:
Suppose your target is $(element)

    var h = $(element)[0].ownerDocument.defaultView.innerHeight;
    $(element)[0].ownerDocument.defaultView.innerHeight = $(element).height();
    html2canvas($(element)).then(function(canvas) {
        $(element)[0].ownerDocument.defaultView.innerHeight = h;
        //Do whatever you want with your canvas
    }

[sbsnet]

I've something very similiar to the code above - I have a fixed sized div I am capturing, so I set a static value - and I set BOTH height and width.
It works great on chrome to grab a DIV
If I do the same thing in IE or Firefox and results are different -- It creates an image that is full sized, but the top of the actual graphic starts about 1/2 way down the image and the bottom is cut off. The image grabbed is more then displays on the screen, but not the entire document... any idea why the grabbed image would get off set halfway down the image?

[vance]

Man, that is a bad solution. After calling ownerDocument.defaultView.innerWidth = xxx; it unbinds and will no longer respond to the actual resizing of the window. I'm looking for a way to rebind it, but I haven't found a way.

[vance]

you have to do it in an iframe with ownerDocument.defaultView.innerWidth = xxx;

[shohoku11wrj]

cenap's workaround without touching the source code works for me. My html2canvas.js version is 0.5.0 alpha.

[KarandikarMihir]

@cenap Thanks! Your solutions seems to be working. Kudos!

[WiL-dev]

For my works just changing the height value node.ownerDocument.defaultView.innerHeight for node.getBoundingClientRect().height

In the html2canvas.min.js (v0.5.0-beta4) change the l.ownerDocument.defaultView.innerHeight for l.getBoundingClientRect().height , leaving it in this way.
...d(l.ownerDocument,n,l.ownerDocument.defaultView.innerWidth,l.getBoundingClientRect().height,f).then(...

[gopinath-sixt]

@cenap : Ur logic... rocked!!! thank a lot