<p>html2canvas पूरी स्क्रीन को कैप्चर नहीं कर रहा है। (ग्रिडस्टर 2)</p>

को निर्मित 12 दिस॰ 2018 · 4टिप्पणियाँ · स्रोत: niklasvh/html2canvas

नमस्ते
मैं html2canvas का उपयोग कर रहा हूं, मेरे पृष्ठ में ग्रिडस्टर विजेट हैं और प्रत्येक विजेट की एक रिपोर्ट है। जब मैं कैनवास तैयार करने की कोशिश कर रहा हूं तो मैं पृष्ठ में सभी वस्तुओं को कैप्चर करने में सक्षम नहीं हूं, यहां तक कि पूरी तरह से दृश्य क्षेत्र में भी नहीं।

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

सबसे उपयोगी टिप्पणी

मैंने संक्रमण को हटाकर समस्या का समाधान किया।
मैंने वैश्विक दायरे पर निम्नलिखित सीएसएस नियम जोड़ा:

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

appick 7 मार्च 2019

🚀2 👍2

सभी 4 टिप्पणियाँ

इसी तरह के मुद्दे का उल्लेख किया गया है
यहां

deepender87 12 दिस॰ 2018

अपडेट करें: अगर मैं ब्राउज़र कंसोल के माध्यम से एक ही कोड को फायर कर रहा हूं, तो उस स्थिति में यह पूरी तरह से ठीक काम कर रहा है। कृपया दोनों के लिए नीचे दिए गए लॉग की जाँच करें:

कंसोल के माध्यम से:

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 13 दिस॰ 2018

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

appick 7 मार्च 2019

🚀2 👍2

कोणीय परियोजनाओं पर जब ग्रिडस्टर एक टैग है। वैश्विक scss में निम्नलिखित जोड़ें

gridster-item {
  transition: unset !important;
}

shashikantj 29 मई 2020

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

<p>html2canvas पूरी स्क्रीन को कैप्चर नहीं कर रहा है। (ग्रिडस्टर 2)</p>

सबसे उपयोगी टिप्पणी

सभी 4 टिप्पणियाँ

संबंधित मुद्दों