Html2canvas: बचत तत्व जो व्यूपोर्ट से परे फैला हुआ है

को निर्मित 3 नव॰ 2017 · 4टिप्पणियाँ · स्रोत: niklasvh/html2canvas

मैं एक पृष्ठ को सहेजने के लिए इसका उपयोग करने की कोशिश कर रहा हूं, जो व्यूपोर्ट से आगे बढ़ता है लेकिन यह कट जाता रहता है। क्या बचाने का कोई तरीका है। नीचे मैं उपयोग कर रहा कोड है। जब मैं व्यूपोर्ट में फिट होने के लिए तत्व को छोटा करता हूं तो यह ठीक काम करता है लेकिन मुझे जो छवि मिलती है वह मुझे इसकी आवश्यकता के लिए बहुत छोटी है, और आकार में वृद्धि केवल धुंधली बनाती है। इन छवियों में से कुछ आकार में मुझे उनकी आवश्यकता है 1300px+ उच्च

`html2canvas(पूर्वावलोकन, {
पृष्ठभूमि: '#ffffff',
प्रस्तुत किया गया: (कैनवास) => {

            canvas.toBlob((blob)=>{
                FileSaver.saveAs(blob, 'mysave.png');
            })

        }
    })`

स्रोत

dking3876

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

आप तत्व की सामग्री को क्लोन करने का प्रयास कर सकते हैं और कैप्चरिंग होने के दौरान उन्हें शरीर में जोड़ सकते हैं, फिर इसे हटा दें। कुछ इस तरह

var clone = document.getElementById('my_element').cloneNode(true);
//... style the clone so it doesn't have scroll...

return html2canvas(clone, {
        useCORS: true,
        allowTaint: false,
        logging: false
    }).then(function (canvas) {
        document.body.removeChild(clone);
        return canvas;
    });

ffflabs 8 नव॰ 2017

👍3

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

यदि एक कंटेनर, डिव, मोडल, आदि में निहित तत्व जिसमें आंतरिक स्क्रॉलिंग है?

ffflabs 4 नव॰ 2017

मैं जिस प्रत्यक्ष कंटेनर को कैप्चर करना चाहता हूं उसमें स्क्रॉलिंग नहीं है लेकिन पैरेंट कंटेनर करता है। मैं स्क्रॉलिंग को सीधे कंटेनर पर डालने का प्रयास करूंगा और देख सकता हूं कि यह काम करता है या नहीं

dking3876 6 नव॰ 2017

अच्छा नहीं। मैंने समायोजित किया ताकि कंटेनर आईएम कैप्चरिंग में पूर्ण डोम दिखाने के लिए स्क्रॉलिंग हो, और यह अभी भी स्क्रीन दृश्यमान अनुभाग में कट जाता है।

कोई अन्य विचार ??

dking3876 7 नव॰ 2017

var clone = document.getElementById('my_element').cloneNode(true);
//... style the clone so it doesn't have scroll...

return html2canvas(clone, {
        useCORS: true,
        allowTaint: false,
        logging: false
    }).then(function (canvas) {
        document.body.removeChild(clone);
        return canvas;
    });

ffflabs 8 नव॰ 2017

👍3

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

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