Html2canvas: "प्रदर्शन: कोई नहीं" के साथ divs की सामग्री प्राप्त करने में सक्षम नहीं

को निर्मित 6 मार्च 2016 · 10टिप्पणियाँ · स्रोत: niklasvh/html2canvas

नमस्ते, मैं एक div का स्क्रीन शॉट लेना चाहता हूं जो छिपा हुआ है

यह वह कोड है जिसकी मैंने कोशिश की थी
एचटीएमएल:

<div` id="visible">
hello there!!
</div>
<div id="hidden" style="display:none">
You can't see me :P
</div>

जेएस:

var elem1=$("#hidden");
if(!elem1.is(":visible"))
{
elem1.show();elem1.fadeIn(1);elem1.fadeOut(1);
}
html2canvas(elem1).then(function(canvas){

$("body").append(canvas);

});

ब्राउज़र में त्रुटि:
**

ध्यान में न आया लेखन त्रुटि: nullhtml2canvas @ html2canvas.js:941 (अनाम फ़ंक्शन) @ HtmlPage की संपत्ति 'लंबाई' नहीं पढ़ सकता। एचटीएमएल:13

**
मेरे बेला: https : //jsfiddle.net/h39tp0Ly/2/

कृपया इसमें मेरी सहायता करें

स्रोत

Spartan-Arun

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

हैलो, मैं "jsPdf" के साथ एक पीडीएफ बनाने के लिए कोणीय 6 और "html2canvas" के साथ काम कर रहा हूं .... मैं एक छिपे हुए div में एक स्क्रीनशॉट लेना चाहता था और जब तक मैं इसे हासिल नहीं कर लेता तब तक मैं इसे नहीं कर सका

कैप्चर आईडी "एचटीएमएल-पीडीएफ" के साथ div में किया जाता है

"एचटीएमएल"
` छात्र कार्ड /ए>

डिव आईडी = "पीडीएफ" *एनजीआईएफ = "टेस्ट" स्टाइल = "टेक्स्ट-एलाइन: सेंटर; मार्जिन-टॉप: 5 पीएक्स;">
डिव आईडी = "एचटीएमएल-पीडीएफ">

/दिव
/div`

"js या कोणीय में टाइपप्रति है"
`डाउनलोड2 () {
वर imgcab: स्ट्रिंग;
imgcab = this.base64logo.trim ();

html2canvas (document.getElementById ('html-pdf'), {स्केल:2})। तब (फ़ंक्शन (कैनवास) {

var img = कैनवास.toDataURL ("छवि / png", 1);

वर डॉक्टर = नया जेएसपीडीएफ ({
अभिविन्यास: 'पी',
इकाई: 'मिमी',
प्रारूप: 'पत्र',
});

doc.addImage (आईएमजी, 'पीएनजी', 2,2,212,272);
doc.addImage (imgcab, 'JPEG', 5, 5,30,30);
doc.save ('testCanvas.pdf');
});`

और सबसे महत्वपूर्ण बात स्क्रीन के अंदर डिव को छुपाना।

"सीएसएस"
#pdf { overflow: hidden; height: 0; }

कोड "एचटीएमएल-पीडीएफ" div के कैप्चर के साथ एक पीडीएफ बनाता है जो छिपे हुए div "पीडीएफ" के अंदर है ...

मुझे आशा है कि आप उनकी सेवा करेंगे

मैंने इसे स्पेनिश में लिखा है और इसका अनुवाद चिली से किया गया है;

kuraudeo 27 जुल॰ 2018

👍14 ❤11

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

Html2canvas प्रदर्शन की व्याख्या करता

herringtown 11 मार्च 2016

योग्य हो सकता है।
धन्यवाद !

atefBB 27 सित॰ 2016

यह काम करता है अगर और केवल अगर div में सीएसएस है जो " डिस्प्ले: कोई नहीं "

Spartan-Arun 4 जन॰ 2017

       onclone: function(document) {
            hiddenDiv = document.getElementById("render");
            hiddenDiv.style.display = 'block';
        }

मुझे इंटरनेट पर कुछ जानकारी मिली। हम " डिस्प्ले: कोई नहीं " के साथ निर्दिष्ट div पर सीएसएस सेट कर सकते हैं, फिर ऊपर की तरह विकल्प ऑनक्लोन जोड़ें। क्या होता है यह देखने के लिए कृपया "लॉगिन: सच" विकल्प जोड़ें

karsondang 23 जन॰ 2017

असल में स्थिति पूर्ण और शीर्ष/बाएं नकारात्मक मानों के साथ व्यूपोर्ट से कंटेनर डालने की चाल - फ़ायरफ़ॉक्स में काम नहीं करती है, यह NS_ERROR_FAILURE अपवाद फेंकता है

हालांकि यह क्रोम में काम करता है

nettiopsu 14 फ़र॰ 2018

मैं हाल ही में इस मुद्दे में भाग गया, और यदि आप चाहते हैं कि एक विशेष div अदृश्य और स्क्रीनशॉट हो, तो सीएसएस गुणों को सेट करें

height: 0%
overflow:hidden

kchen1025 7 जून 2018

😕5 👎2 👍2

यह मेरे लिए काम नहीं करता @ kchen1025

chidiwilliams 14 जुल॰ 2018

मैंने लक्ष्य div के तुरंत बाद कैनवास उत्पन्न करना समाप्त कर दिया, और फिर कैनवास लोड होने के तुरंत बाद div को छुपाया। झिलमिलाहट मुश्किल से ध्यान देने योग्य है।

मेरा कोड इस तरह दिखता है:

<div id="capture">
  ...
</div>
<div id="end"></div>

html2canvas(document.querySelector("#capture")).then(canvas => {
  $("#end").append(canvas)
  $("#capture").hide()
});