html2canvas not capturing the whole screen. (Gridster 2)
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
👍1
All 4 comments
Similar issue has been mentioned
here
deepender87
on 12 Dec 2018
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:
Kindly update.
Thanks
deepender87
on 13 Dec 2018
I solved the problem by removing the transition.
I added following css rule on the global scope:
.gridster-item {
transition: unset !important;
}
appick
on 7 Mar 2019
🚀2
👍2
On Angular projects when gridster is a tag. Add following to global scss
gridster-item {
transition: unset !important;
}
shashikantj
on 29 May 2020
Was this page helpful?
0 / 5 - 0 ratings
Related issues
rrutkows
·
4Comments
arzyu
·
3Comments
anthonymejia
·
4Comments
ABHIKSINGHH
·
3Comments
yasergh
·
5Comments
Most helpful comment
I solved the problem by removing the transition.
I added following css rule on the global scope: