Only renders what is on shown the screen and the result image is clipped

[icakirlar]

This issue can be shown as a duplicate of previous issues #542, #511, #588, etc. However the problem is still open.

Html2canvas is successful when the bounds of the window is never changed and the target element is always %100 visible on the screen. However, this assumption is not always valid. When the bounds of the window is changed or scroll down/up operations only effects the bounds of the defaultView, but the dom structure remains the same after first initiation. In order to fix the problem I applied the following change in the source code and works fine for my case. Hope it can be placed in 0.5.0 release.

• renderDocument expects the windowWidth and windowHeight values. But the actual values (core.js, line 44) refers to document.defaultView.innerWidth and document.defaultView.innerHeight values. If the size of the view changed, unless your element is a part of the actual document, rendering do not take into consideration of your whole element, it only renders the visible area. If you pass appropriate values, it renders the whole element without any problem.

if you call renderDocument( node.ownerDocument,
options,
options.innerWidth, //first width of the window when the document is created
options.innerHeight,//first heightof the window when the document is created
index )
like this it works properly.

[820fans]

Great !!! I solved the problem after trying your method . Thank you !!

[Dayjo]

@icakirlar awesome, been wondering if this was possible, often my users are using small browser windows and you end up with a cropped off image, when really you want the whole document area whether it's visible or not.

Any chance of making this a pull request?

[NPC]

Hmm, for me this change (unless I did it incorrectly) renders elements that are partially off-screen as completely black, while top-level elements seem to render fine.

[Dayjo]

I also have now tried this without success. Trying to make sure the entire 1024 x 576 element is rendered, (if it's clipped off the page / scrolled off the page, that is black) my code is as follows;

            var w = 232, h = 148; var self = this;
                return html2canvas(document.getElementById('da-page-canvas'), {
                    background: '#fff',
                    allowTaint: true,
                    useCORS: true,
                    page: this,
                    onclone: function(doc){
                        var canv = doc.getElementById('da-page-canvas');
                        canv.style.borderColor = 'transparent';
                        canv.className = "da-page-canvas da-screenshot";

                        var selected = doc.querySelectorAll('.ui-selected');
                        for ( var i =0; i< selected.length; i++ ) {
                            selected[i].classList.remove('ui-selected');
                        }
                    },
                    onrendered: function(canvas){
                        var url = canvas.toDataURL("image/jpeg", 0.95);
                        handleImage(url);
                    }
                }, 1024, 576);

[AmolKur]

Same issue here - parallax/jsPDF#793. Any solution on this ?

[ewkonzo]

@icakirlar i had to folk this to make changes you suggested, now i know why this has so many folks.

The fix worked tho, thanks!

[niklasvh]

Is this still an issue with v1.0.0? If so, could you please share an example on jsfiddle.

[no-response]

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.

[newdevsoft7]

Hi @icakirlar,
Where can I find core.js now?