Html2canvas: केवल वही प्रस्तुत करता है जो दृश्य में है

किसी भी तरह होमपेज पर आपके उदाहरणों पर यह शरीर में सब कुछ दिखाता है यहां तक ​​​​कि जो नहीं दिखता है ... आपने यह कैसे किया?

से संभावित डुप्लिकेट: https://github.com/niklasvh/html2canvas/issues/117

तो मैं जानना चाहता हूं कि किसी निर्दिष्ट तत्व को कैसे कैप्चर किया जा सकता है? क्या किसी के पास समाधान है

@ जस्टिन इसे आजमाएं

<div id="test-case">Test-me</div>

html2canvas(document.getElementById("test-case")).then(function(canvas) {
    document.body.appendChild(canvas);
});

मैं नवीनतम संस्करण के साथ इस व्यवहार की पुष्टि कर सकता हूं। यह मांगी गई वस्तु के सही आकार को प्रस्तुत करेगा, लेकिन वास्तव में कैनवास को कुछ भी प्रस्तुत नहीं करेगा जो वर्तमान व्यूपोर्ट की ऑफ-स्क्रीन है। तो अगर

<div id="test-case">Test-me</div>

वर्तमान में ब्राउज़र में दिखाई दे रहा है, यह रेंडर करेगा। यदि यह ऑफ-स्क्रीन है, तो कैनवास खाली है (लेकिन सही आकार)। आंशिक रूप से दिखाई देने वाला: आंशिक रूप से प्रस्तुत किया गया। मेरा स्क्रॉलहाइट = 0 की तरह कार्य नहीं करता है, यह कोड निष्पादित होने पर जो कुछ भी दिखाई देता है उसे प्रस्तुत करता है। (मेरा बटन नीचे है)।

बीटीएम की टिप्पणी की तरह, मैं जानना चाहता हूं कि यह उदाहरण साइट पर कैसे किया जाता है। क्या यह ऑफ स्क्रीन संसाधनों को प्राप्त करने के लिए एंगुलर या बूटस्ट्रैप में किसी चीज़ पर निर्भर हो सकता है?

@cchubb मुझे समझ में नहीं आता कि एंगल और बूटस्ट्रैप का इससे क्या लेना-देना है। जॉन की समस्या, मुझे एक विशिष्ट तत्व प्रदान करने की बात लगती है।

यदि आप रेंडर करना चाहते हैं जो व्यू-पोर्ट के बाहर है, तो बस उपयोग करें

html2canvas(document.body).then(function (canvas) {});

यदि आप तत्वों को "अतिप्रवाह" प्रस्तुत करना चाहते हैं तो रनटाइम पर "अतिप्रवाह" को हटा दें और प्रक्रिया के बाद फिर से जोड़ें क्लासनाम जोड़ने के लिए जावास्क्रिप्ट का उपयोग करें, जैसे:

.no-scroll {
     overflow: visible !important;
}

#main {
     overflow: auto;
     height: 200px;
}

<div id="main">
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
</div>

document.getElementById("main").className = "no-scroll";
html2canvas(document.body).then(function (canvas) {
      document.getElementById("main").className = "";
});

या बस html2canvas को "ओवरफ्लो" वाले तत्व के भीतर तत्व को प्रस्तुत करने के लिए इंगित करें, जैसे:

#parent {
     overflow: auto;
     height: 200px;
}

#child {
background-color: #fc0;
height: 600px;
}
<div id="parent">
<div id="main">
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
</div>
</div>

html2canvas(document.getElementById("main")).then(function (canvas) {});

मेरे दृष्टिकोण से अनावश्यक सुविधाओं के लिए वास्तव में कई सुझाव हैं, बस सही डीओएम तत्वों को लक्षित करें और उनके पक्ष में "सीएसएस" का उपयोग करें।

मैं यह समझ गया। आपने इसे 0.5.0-alpha2 में ठीक किया है। अगर मैं 0.5.0-अल्फा 1 संस्करण का उपयोग करता हूं तो यह क्लिप करता है, लेकिन अल्फा 2 संस्करण नहीं करता है। मैंने यह भी नहीं देखा कि अल्फा 2 उपलब्ध था क्योंकि रिलीज पेज अल्फा 1 पर ध्यान केंद्रित कर रहा था।

यहां एक पहेली है जो इसे अब अल्फा 2 के साथ काम कर रही है। https://jsfiddle.net/cchubb/fy7tw7ek/1/ यदि आप बाहरी संसाधन को वापस अल्फ़ा 1 में बदलते हैं, तो नीचे के लिंक पर क्लिक करने पर यह क्लिप हो जाएगा। (इसे देखने के लिए आपको डाउनलोड फ़ाइल को .png के रूप में सहेजना होगा, fiddles मुझे आउटपुट विंडो href को डेटा में बदलने नहीं देगा।)

@ btm1 ,

@cchubb मैं इसे एक शॉट दूंगा।

@cchubb अंतर्निहित समस्या अल्फा 2 में तय की गई है और आप सही कह रहे हैं कि यह अच्छी तरह छुपा हुआ है मैंने यह भी नहीं देखा कि अल्फा 2 था।

हम्म, मेरे लिए अल्फा 2 में अभी भी केवल उस तत्व का हिस्सा है जो व्यूपोर्ट में "दृश्यमान" है। प्रदर्शन के लिए http://jsfiddle.net/NPC42/ykvL6a17/ देखें—html2canvas केवल उन्हीं पंक्तियों को निर्यात करता है जिन्हें व्यूपोर्ट में स्क्रॉल किया जाता है (चाहे वे स्क्रॉल किए गए कंटेनर div में दिखाई दे रहे हों या नहीं)।

क्या मैं किसी तरह html2canvas को गलत कह रहा हूँ? जब मैं इसे अपने वास्तविक कोड पर परीक्षण करता हूं (जेएसएफडल एक नहीं, जिसे मैंने सिर्फ डेमो के लिए बनाया है), यह सुझाव पूरे तत्व को प्रस्तुत करने में मदद करता है: https://github.com/niklasvh/html2canvas/issues/650 , लेकिन मुझे उम्मीद है पुस्तकालय हैकिंग से बचने के लिए।

@NPC यह केवल वही प्रस्तुत नहीं करेगा जो आपके द्वारा

@ btm1 , हाँ, मुझे लगता है कि यह इरादा नहीं है, क्योंकि मैं उस तत्व में जाता हूं जो स्क्रॉल किए गए एक के भीतर है, तत्व में कोई अतिप्रवाह ट्रिमिंग नहीं है।

अभी के लिए मेरे ऐप में मैंने पाया कि मुझे अपने पूरे तत्व को शरीर पर फिर से जोड़ने की जरूरत है, उस पर विशिष्ट चौड़ाई/ऊंचाई को मजबूर करना (क्योंकि इसमें पूरी तरह से स्थित तत्व शामिल हैं), इस बीच एक पूर्ण-स्क्रीन द्वारा इस सभी रसोई को कवर करना "निर्यात तैयार करना, कृपया प्रतीक्षा करें" ओवरले, क्योंकि html2canvas यह सब प्रस्तुत करने में 10+ सेकंड लेता है। रेंडर हो जाने के बाद—मैं इसे वापस मूल स्थान (एक स्क्रॉल किए गए कंटेनर के अंदर) में संलग्न करता हूं, चौड़ाई/ऊंचाई को परेशान करता हूं।

बोझिल, लेकिन यह काम करता है।

आश्चर्यजनक रूप से, यह केवल दिए गए तत्व की वर्तमान में दिखाई देने वाली शीर्ष सीमा से ही प्रस्तुत होता है।

https://jsfiddle.net/bianjp/bpc3nq69/1/ आज़माएं
संस्करण 0.5.0.beta4 का उपयोग करना।

समाधान html2canvas को कॉल करने से पहले $('html, body').scrollTop(0) (या तत्व के शीर्ष को दृश्यमान बनाने का कोई अन्य तरीका) को कॉल करना है।

प्रस्तावित फिक्स के लिए धन्यवाद @bianjp ।

आश्चर्यजनक रूप से, यह केवल दिए गए तत्व की वर्तमान में दिखाई देने वाली शीर्ष सीमा से ही प्रस्तुत होता है।

क्या यह एक सामान्य व्यवहार है ... यह मुझे बहुत अजीब लगता है!

+1

यह SO उत्तर मेरे लिए काम करता है।

html2canvas को कॉल करने से पहले, उस तत्व को स्क्रॉल करें जिसे आप व्यूपोर्ट में प्रस्तुत करना चाहते हैं।

const el = document.querySelector('#test')
el.scrollIntoView()
setTimeout(function () {
  html2canvas(el, {
    onrendered: function (canvas) {
      document.body.appendChild(canvas)
    },
    useCORS: true
  })
}, 10)

इससे मेरा काम बनता है।
संस्करण का उपयोग करना 0.5.0-बीटा4 है।

क्या यह अभी भी v1.0.0 के साथ कोई समस्या है? यदि हां, तो क्या आप कृपया jsfiddle पर एक उदाहरण साझा कर सकते हैं।

यह समस्या अपने आप बंद कर दी गई है क्योंकि मूल लेखक की ओर से अधिक जानकारी के लिए हमारे अनुरोध का कोई जवाब नहीं मिला है। केवल उस जानकारी के साथ जो वर्तमान में समस्या में है, हमारे पास कार्रवाई करने के लिए पर्याप्त जानकारी नहीं है। यदि आपके पास है तो कृपया संपर्क करें या हमारे लिए आवश्यक उत्तर खोजें ताकि हम आगे की जांच कर सकें।

अरे, @niklashvh

मुझे केवल डीओएम के लिए दृश्यमान स्नैपशॉट लेने के लिए भी समस्या का सामना करना पड़ रहा था। मेरे पास संस्करण 0.5.0-बीटा4 . है
तो, मैं @ziyoung समाधान से सहमत हूं। मैंने वैसा ही किया जैसा उन्होंने सुझाव दिया।

           `$('html,body').scrollTop(0);

     html2canvas( $("#rectangular_div"), {
         useCORS: true,
         dpi: 200,

          onrendered:function(canvas) {

              var str = canvas.toDataURL("image/png");
              var contentType = 'image/png';
              console.log(str);
              b64Data =str;
              imgFrameSave();
          }
        })`

इसलिए, मैंने div स्थिति को शीर्ष 0 पर शरीर पर सेट किया और फिर html2canvas पर कॉल किया। तो मेरे अनुभव के अनुसार, मैं के साथ-साथ @eKoopmans द्वारा संस्करण 0.5.0-beta4 उपयोग करें ताकि आप छवि pix-उत्साह समस्या से बचने कर सकते हैं जो DOM से पूर्ण छवि पर कब्जा करने की सिफारिश की।

वह डेस्कटॉप पर काम तो करता है लेकिन मोबाइल पर काम नहीं करता

मैंने जो किया वह window.scrolTo(0,0) कॉल htmltocanvas() से पहले है, यदि आप स्क्रीन के शीर्ष पर हैं तो div पूर्ण मुद्रित है