Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

html2canvas not capturing the whole screen. (Gridster 2)

See original GitHub issue

Hi I am using the html2canvas, my page has gridster widgets and each widget has a report. when i am trying to prepare the canvas I am not able to capture all the items in page, not even the one fully which are in visible area.

print(element: Element, renderer: Renderer2, includeSvgs = true) {
        const height = element.clientHeight;
        const width = element.clientWidth;
        if (includeSvgs) {
            this.convertSvgElems(element, renderer);
        }
        html2canvas(element).then((canvas) => {
            let html = '<html><head><title></title></head>';
            html += '<body style="width:"' + width + '" ;height:"' + height + '" padding: 0; margin: 0;"';
            html += ' onload="window.focus(); window.print(); window.close()">';
            html += '<img crossorigin="anonymous" allowTaint = true useCORS=true src="' + canvas.toDataURL() + '" /></body></html>';
            const printWindow = window.open('', 'to_print', 'height=700,width=800');
            printWindow.document.open();
            printWindow.document.write(html);
            if (includeSvgs) {
                this.deleteCanvasElems(element, renderer);
            }
            printWindow.document.close();
        });

    }

Issue Analytics

State:
Created 5 years ago
Reactions:1
Comments:6

Top GitHub Comments

4reactions

appickcommented, Mar 7, 2019

I solved the problem by removing the transition. I added following css rule on the global scope:

  .gridster-item {
        transition: unset !important;
    }

0reactions

messaoudi-mounircommented, Dec 8, 2022

it’s work properly on version 1.3.1 only, but not on 1.3.2 to 1.4.1

Top Results From Across the Web

HTML2Canvas does not render full div, only what is visible on ...

I'm using v5 beta 3. When this code runs, it only renders what is visible on the screen. The #potenzial-page div is essentially...

HTML2Canvas does not render full div, only what is visible on ...

JavaScript : HTML2Canvas does not render full div, only what is visible on screen ? [ Gift : Animated Search Engine ...

html2canvas not capturing full div

Html2Canvas is working fine with text and small images of 1-2 kb. but ... ran on a gridster.js element that has the resize...

Options - html2canvas

Name Default Description logging true Enable logging for debug purposes width Element width The width of the canvas height Element height The height of the canvas...

opmanager_standard_userguide.pdf - ManageEngine

Adding a new VoIP Monitor ... Page 2. OpManager - System Requirements ... Step 10: Click 'Finish' to complete OpManager Central Server ...