html2canvas ऑफस्क्रीन

Question

html2canvas का उपयोग करने में, मेरे पास DOM ऑब्जेक्ट्स के stack हैं (सापेक्ष स्थान div जिसमें विभिन्न चीजें हैं), कि मैं व्यक्तिगत थंबनेल बनाना चाहता हूं। तो यदि दस divs हैं, तो मैं दस थंबनेल बनाएगा।

इनमें से कुछ ऑब्जेक्ट ऑफस्क्रीन होंगे - इन divs का प्रत्येक एक "divDiv" नामक एक एकल, व्यापक div में हैं। मैं मुख्य डीआईवी के भीतर divs के माध्यम से पुनरावृत्त करता हूं और उनमें से प्रत्येक पर HTML2canvas निष्पादित करता हूं।

ऑनस्क्रीन वाले लोगों के लिए, यह ठीक काम करता है। जो लोग ऑफस्क्रीन हैं वे नहीं - वे वापस खाली आते हैं। मैंने एक वर्कअराउंड बनाया जो ऑब्जेक्ट्स को mainDiv के शीर्ष पर स्क्रॉल करता है, हालांकि यह एक कड़वाहट और दृश्यमान रूप से अपरिहार्य है।

क्या एक DOM ऑब्जेक्ट निर्दिष्ट करना संभव है जो दिखाई नहीं दे रहा है? आदर्श रूप में, मैं एक युक्त div निर्दिष्ट करने में सक्षम होना चाहता हूं और html2canvas अभिभावक दृश्यता को अनदेखा कर रहा हूं, इसलिए मैं छुपे ऑब्जेक्ट्स को कैप्चर कर सकता हूं, लेकिन इसे छोड़कर, मैं आसानी से स्क्रॉल किए गए ऑब्जेक्ट को कैप्चर करने में सक्षम होना चाहता हूं स्क्रीन।

कोई विचार, विचार? धन्यवाद!

---- यहां कुछ उदाहरण कोड है। असल में, यदि आपके पास एक div के भीतर divs का गुच्छा था, तो उनके माध्यम से पुनरावृत्त। मैं वास्तव में कॉलबैक पुनरावर्ती क्रिया बुला के साथ इस recursively ताकि केवल एक समय में एक संसाधित हो जाता है करते हैं, तो यह इस तरह दिखता है:

function recurser(anIndex, callback) { 
    if (anIndex == -1) { 
     callback(); 
     return; 
    } 
    $(myDivs[anIndex]).html2canvas({ 
     onrendered : function(canvas) { 
      var img = canvas.toDataURL(); 
      // store the image in an array, do stuff with it, etc. 
      recurser(--anIndex, callback); 

     } 
    }) 

} 

एक बार पुनरावर्ती कॉल पूरा कर रहे हैं, यह कॉलबैक फ़ंक्शन निष्पादित, जो एक ऐसा कार्य है जो छवियों के साथ सामान करेगा।

फिर से, यह तब तक ठीक काम करता है जब तक स्क्रॉलिंग div के भीतर ऑब्जेक्ट दिखाई दे रहे हैं जिसमें #mainDiv में सभी divs शामिल हैं। एक बार divs के किसी भी भाग को स्क्रॉल कर दिया जाता है, हालांकि, वे काले रंग देते हैं। वास्तव में, यदि आधे में से दो divs को स्क्रॉल किया जाता है (एक का शीर्ष आधा, अगले के निचले हिस्से में), वे दोनों पूरी तरह से काले रंग देते हैं।

Answer 1

मुझे पता है कि यह एक पुराना सवाल है लेकिन यह बहुत दिलचस्प लग रहा था। मेरे परीक्षण के आधार पर यह केवल position: absolute और position:fixed तत्वों की तरह लग रहा था जो व्यूपोर्ट के बाहर थे, इस समस्या के कारण थे। मैंने समस्या का हल निकाला।

मैं जो कर रहा हूं वह तत्व का क्लोन बना रहा है। क्लोन की स्टाइल को left = 0, top = window.innerHeight पर सेट करना (ताकि यह विंडो के अंदर न हो) और position = 'relative'। फिर मैं क्लोन पर क्लोन जोड़ता हूं, क्लोन पर html2canvas का उपयोग करता हूं, और फिर शरीर से क्लोन हटा देता हूं। यह समाधान आईई, फ़ायरफ़ॉक्स और क्रोम में मेरे लिए काम करता है।

मैंने JSBin example here बनाया है।

function hiddenClone(element){ 
    // Create clone of element 
    var clone = element.cloneNode(true); 

    // Position element relatively within the 
    // body but still out of the viewport 
    var style = clone.style; 
    style.position = 'relative'; 
    style.top = window.innerHeight + 'px'; 
    style.left = 0; 

    // Append clone to body and return the clone 
    document.body.appendChild(clone); 
    return clone; 
} 

var offScreen = document.querySelector('.off-screen'); 

// Clone off-screen element 
var clone = hiddenClone(offScreen); 

// Use clone with htm2canvas and delete clone 
html2canvas(clone, { 
    onrendered: function(canvas) { 
     document.body.appendChild(canvas); 
     document.body.removeChild(clone); 
    } 
}); 

Answer 2

आह अब आप डिव प्रदर्शन करने की कोशिश की:: यहाँ कुंजी जावास्क्रिप्ट कोड है कोई नहीं; और डिव डिस्प्ले: पूर्ण; (या आप कैसे दिखाना चाहते हैं अपने div करने के लिए - हो सकता है z- सूचकांक)

arrow1.onclick = (event){ 
arrow1.style.display = none; 
arrow2.style.display = absolute; 
} 

    arrow2.onclick = (event){ 
arrow2.style.display = none; 
arrow1.style.display = absolute; 
} 

Answer 3

सेट 'अतिप्रवाह' अपनी मूल तत्वों में से सभी के लिए दिख रहा है।बाद को दूर यह

सीएसएस

.overflowVisible{ 
    overflow:visible !important; 
} 

जे एस

$("#container").parents().each(function(ind,elem){ 
    $(elem).addClass("overflowVisible"); 
}); 

html2canvas($("#container"), { 
    onrendered: function(canvas) { 
     var img =canvas.toDataURL("image/png"); 
     $('body').append(img); 
     $("#container").parents().each(function(ind,elem){ 
      $(elem).removeClass("overflowVisible"); 
     }); 
    } 
});