<p>html2canvas 没有捕获整个屏幕。 （网格员 2）</p>

创建于 2018-12-12  ·  4评论  ·  资料来源: niklasvh/html2canvas

你好
我正在使用 html2canvas，我的页面有 gridster 小部件，每个小部件都有一个报告。 当我尝试准备画布时，我无法捕获页面中的所有项目，甚至无法完全捕获可见区域中的项目。

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

    }
picture deepender87
👍1

最有用的评论

我通过删除过渡解决了这个问题。
我在全局范围内添加了以下 css 规则：

  .gridster-item {
        transition: unset !important;
    }
picture appick 于 2019-03-07
🚀2 👍2

所有4条评论

已经提到了类似的问题
这里

deepender87 picture deepender87 于 2018-12-12

更新：如果我通过浏览器控制台触发相同的代码，在这种情况下它工作得很好。 请检查下面提到的日志：

通过控制台：

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

通过代码：

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

我还附上了这两种情况的图片：

not-working
working

请更新。
谢谢

deepender87 picture deepender87 于 2018-12-13

我通过删除过渡解决了这个问题。
我在全局范围内添加了以下 css 规则：

  .gridster-item {
        transition: unset !important;
    }
appick picture appick 于 2019-03-07
🚀2 👍2

在 Angular 项目中，当 gridster 是一个标签时。 将以下内容添加到全局 scss

gridster-item {
  transition: unset !important;
}
shashikantj picture shashikantj 于 2020-05-29
此页面是否有帮助？
0 / 5 - 0 等级

相关问题

diego-rey picture diego-rey  ·  3评论
anthonymejia picture anthonymejia  ·  4评论
bishwapoudel picture bishwapoudel  ·  4评论
AlphaDu picture AlphaDu  ·  4评论
wbarrantes picture wbarrantes  ·  3评论