Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

html2canvas not capturing the whole screen. (Gridster 2) #1720

Open
deepender87 opened this issue Dec 12, 2018 · 6 comments
Open

html2canvas not capturing the whole screen. (Gridster 2) #1720

deepender87 opened this issue Dec 12, 2018 · 6 comments

Comments

@deepender87
Copy link

deepender87 commented Dec 12, 2018 •
edited

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();
        });

    }
@deepender87
Copy link
Author

deepender87 commented Dec 12, 2018 •
edited

Similar issue has been mentioned
here

@deepender87 deepender87 changed the title html2canvas not capturing the whole screen. html2canvas not capturing the whole screen. (Gridster 2) Dec 13, 2018
@deepender87
Copy link
Author

Update: If I am firing the same code through browser console, in that case it is working perfectly fine. please check the below mentioned logs for both:

Through console:

ZoneAwarePromise {__zone_symbol__state: null, __zone_symbol__value: Array(0)}
jspdf.min.js:5422 495ms html2canvas: Document cloned
jspdf.min.js:5422 497ms html2canvas: Initialized CanvasRenderer with size 1366 x 622
jspdf.min.js:5422 497ms html2canvas: Starting NodeParser
jspdf.min.js:5422 635ms html2canvas: Fetched nodes, total: 2104
jspdf.min.js:5422 636ms html2canvas: Calculate overflow clips
jspdf.min.js:5422 1030ms html2canvas: Start fetching images
jspdf.min.js:5422 1034ms html2canvas: Added image #1 <svg xmlns:xlink=​"http:​/​/​www.w3.org/​1999/​xlink" height=​"24px" version=​"1.1" viewBox=​"0 0 24 24" width=​"24px" xmlns=​"http:​/​/​www.w3.org/​2000/​svg">​…​</svg>​
jspdf.min.js:5422 1037ms html2canvas: Added image #2 <svg xmlns:xlink=​"http:​/​/​www.w3.org/​1999/​xlink" height=​"24px" version=​"1.1" viewBox=​"0 0 24 24" width=​"24px" xmlns=​"http:​/​/​www.w3.org/​2000/​svg">​…​</svg>​
jspdf.min.js:5422 1040ms html2canvas: Added image #3 <svg xmlns:xlink=​"http:​/​/​www.w3.org/​1999/​xlink" height=​"24px" version=​"1.1" viewBox=​"0 0 24 24" width=​"24px" xmlns=​"http:​/​/​www.w3.org/​2000/​svg">​…​</svg>​
jspdf.min.js:5422 1040ms html2canvas: Added image #4 <svg xmlns:xlink=​"http:​/​/​www.w3.org/​1999/​xlink" height=​"24px" version=​"1.1" viewBox=​"0 0 24 24" width=​"24px" xmlns=​"http:​/​/​www.w3.org/​2000/​svg">​…​</svg>​
jspdf.min.js:5422 1042ms html2canvas: Added image #5 <svg xmlns:xlink=​"http:​/​/​www.w3.org/​1999/​xlink" height=​"24px" version=​"1.1" viewBox=​"0 0 24 24" width=​"24px" xmlns=​"http:​/​/​www.w3.org/​2000/​svg">​…​</svg>​
jspdf.min.js:5422 1053ms html2canvas: Finished searching images
jspdf.min.js:5422 1063ms html2canvas: Succesfully loaded image #5 r {src: svg, image: img, promise: ZoneAwarePromise}
jspdf.min.js:5422 1065ms html2canvas: Succesfully loaded image #4 r {src: svg, image: img, promise: ZoneAwarePromise}
jspdf.min.js:5422 1067ms html2canvas: Succesfully loaded image #3 r {src: svg, image: img, promise: ZoneAwarePromise}
jspdf.min.js:5422 1068ms html2canvas: Succesfully loaded image #2 r {src: svg, image: img, promise: ZoneAwarePromise}
jspdf.min.js:5422 1069ms html2canvas: Succesfully loaded image #1 r {src: svg, image: img, promise: ZoneAwarePromise}
jspdf.min.js:5422 1071ms html2canvas: Images loaded, starting parsing
jspdf.min.js:5422 1072ms html2canvas: Creating stacking contexts
jspdf.min.js:5422 1110ms html2canvas: Sorting stacking contexts
jspdf.min.js:5422 1138ms html2canvas: Render queue created with 3026 items
jspdf.min.js:5422 3316ms html2canvas: Finished rendering
jspdf.min.js:5422 3328ms html2canvas: Cropping canvas at: left: 0 top: 61 width: 1366 height: 561
jspdf.min.js:5422 3340ms html2canvas: Resulting crop with width 1366 and height 561 with x 0 and y 61
jspdf.min.js:5422 3388ms html2canvas: Cleaned up container

Through Code:

0ms html2canvas: html2canvas $npm_package_version
Logger.js:36 1028ms html2canvas: Document cloned, using computed rendering
Logger.js:36 1028ms html2canvas: Starting node parsing
Logger.js:36 1096ms html2canvas: Added image data:image/svg+xml,%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20height%3D%2224px%22%20version%3D%221.1%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224px%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20style%3D%22di
Logger.js:36 1359ms html2canvas: Finished parsing node tree
Logger.js:36 1496ms html2canvas: Finished loading 11 images (11) [canvas.screenShotTempCanvas, canvas, canvas.screenShotTempCanvas, canvas, canvas.screenShotTempCanvas, canvas, canvas.screenShotTempCanvas, canvas, canvas.screenShotTempCanvas, canvas, img]
Logger.js:36 1497ms html2canvas: Starting renderer
Logger.js:36 1498ms html2canvas: Canvas renderer initialized (1366x561 at 0,61) with scale 1
Logger.js:36 1599ms html2canvas: Render completed

I have also attached the images for both the cases:

not-working
working

Kindly update.
Thanks

@appick
Copy link

appick commented 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;
    }

@shashikantj
Copy link

On Angular projects when gridster is a tag. Add following to global scss

gridster-item {
  transition: unset !important;
}

@KateFr
Copy link

KateFr commented Sep 15, 2021

Is it only for me or this css fix stopped working on new version 1.3.2

@messaoudi-mounir
Copy link

messaoudi-mounir commented Dec 7, 2022 •
edited

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@messaoudi-mounir @shashikantj @appick @deepender87 @KateFr