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

    }

출처

deepender87

👍1

가장 유용한 댓글

전환을 제거하여 문제를 해결했습니다.
전역 범위에 다음 CSS 규칙을 추가했습니다.

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

appick 에 2019년 03월 07일

🚀2 👍2

모든 4 댓글

비슷한 문제가 언급되었습니다
여기

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 에 2018년 12월 13일

전환을 제거하여 문제를 해결했습니다.
전역 범위에 다음 CSS 규칙을 추가했습니다.

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

appick 에 2019년 03월 07일

🚀2 👍2

gridster가 태그인 경우 Angular 프로젝트에서. 전역 scss에 다음 추가

gridster-item {
  transition: unset !important;
}

shashikantj 에 2020년 05월 29일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

<p>html2canvas가 전체 화면을 캡처하지 않습니다. (그리스터 2)</p>

가장 유용한 댓글

모든 4 댓글

관련 문제