Get full content of an overflow element

[Maxence]

Hello,

Is it possible to render a full element from an overflow element ?

I got something like this :

<div id="#overflow" style="overflow: auto; height: 200px;">
     <div id="content" style="height: 800px; background-color: #000">
           some text...
     </div>
</div>

My #content is taller than my #overflow.

thiscreen = $('#content');
thiscreen = thiscreen[0];

var options = options || {};
options.elements = [thiscreen];

html2canvas.logging = options && options.logging;
options.complete = function(images){
    var queue = html2canvas.Parse(thiscreen, images, options),
    $canvas = html2canvas.Renderer(queue, options);
    document.getElementById('imgtest').src = $canvas.toDataURL();
};
html2canvas.Preload(thiscreen,  options);

image got the right resolution, but its transparency

[edit]
Example : http://sweetweb.fr/demo/html2canvas_overflow.html

[Maxence]

Here is my example :
http://sweetweb.fr/demo/html2canvas_overflow.html

[niklasvh]

Currently there is no option to render the content in a different size than it appears on the page. I'll have to look into whether it is even possible (i.e. what kind of element dimensions is returned by the the browser)

[tnilles]

Hi, I'm also interested about that. Would be a great feature!

[usmonster]

@tnilles can you check whether either the workaround I mentioned in #60 or upgrading to the newest version in master resolves the issue for you? Please note that these are mutually exclusive tests, as the workaround will do nothing in 0.5.0 (there are no onpreloaded or onparsed options in the new version, but there may be other nice, not-yet-documented options somewhere in there that would allow for a similar fix, e.g. onclone).

[programmin1]

Why not make the changes, and immediately set the css changes back after screenshotting it?
I found it's kind of annoying - html2canvas will never let you screenshot things that have display:none for example, but I guess that is correct - it shows exactly how it is in the browser.

[usmonster]

@programmin1 Your suggestion also works and is more straightforward, but I'd found that it sometimes shows a visible change on the page to the user, at least for 0.4.x. My workaround tries to minimize that flash, though it's possible that, using the onclone option, you can just apply the change directly to the cloned document and bypass any visual hiccups without even needing to clean anything up afterward.

[usmonster]

In any case, would you say this could be closed as a duplicate of #60?

[niklasvh]

This should be easily fixable with onclone, as you can modify the DOM as you see fit there without affecting the original page.

[ruthraprakash]

@niklasvh Hi All, I have div which is scrollable. When i send the div input as canvas parameter, it just rendering what is avialable in viewport. I gone through all solutions. I didnt understand. Can anyone tell how to take entire content in div as screenshot.

[ghalibsoomro]

same issue here.. rendering what is visible i want to capture the tabs data which is not working at all in canvas2html

[nishantgupta11]

-> Add CSS overflow-y: scroll; to HTML element pdfHTML
-> Add attribute width & windowWidth to html2canvas method, which should be equal to width of pdfHTML Div

html2canvas(document.querySelector(".pdfHTML"), {
    width: 1350, windowWidth: 1350
}).then(canvas => {
    base64stringpdf = canvas.toDataURL("image/jpeg");
});

[nishantgupta11]

-> Add CSS overflow-y: scroll; to HTML element pdfHTML
-> Add attribute width & windowWidth to html2canvas method, which should be equal to width of pdfHTML Div

html2canvas(document.querySelector(".pdfHTML"), {
    width: 1350, windowWidth: 1350
}).then(canvas => {
    base64stringpdf = canvas.toDataURL("image/jpeg");
});