html2canvas (ठीक से प्रारंभ करने में असमर्थ) का उपयोग करके वेबपृष्ठ का स्क्रीनशॉट बनाएं

Question

मैं अपने वेबपृष्ठ के स्क्रीनशॉट लेने के लिए http://html2canvas.hertzen.com/ का उपयोग करने का प्रयास कर रहा हूं। मैं का उपयोग कर एक कैनवास तत्व को प्रारंभ करने में असमर्थ हूँ ...

var canvas = $('body').html2canvas(); 

अगर मैं एक उचित कैनवास मैं की तरह

var dataUrl = canvas.toDataURL(); //get's image string 
window.open(dataUrl);    // display image 

दुर्भाग्य से कुछ के साथ पालन करेगा प्राप्त करने में सक्षम थे, दस्तावेजों बहुत IMO सीमित है। http://html2canvas.hertzen.com/documentation.html। मैं नहीं मानता कि मुझे लगता है मैं बस भी noob अगर इस आदमी के साथ screen capturing using html2canvas

मैं सफलता पा रहा है समझने के लिए कर रहा हूँ

के रूप में मैं किसी भी गतिशील ग्राफिक्स उपयोग नहीं कर रहा है (लेकिन भी नहीं है कि अब तक वैसे भी हो रही है) को पहले से लोड करने की आवश्यकता है ऐसा लगता है कि इस साथी से कहीं अधिक दूर नहीं हो रहा है .. How to upload a screenshot using html2canvas?

मेरा आदर्श समाधान कम से कम कोड के साथ स्क्रीनशॉट बनाने का तरीका दिखाएगा। (। कैनवास को कॉपी एचटीएमएल toDataURL स्ट्रिंग प्राप्त उत्पादन स्ट्रिंग।)

किसी भी अंतर्दृष्टि बहुत सराहना =)

Answer 1

आप इसे इस तरह से उपयोग करना चाहिए:

$('body').html2canvas(); 
var queue = html2canvas.Parse(); 
var canvas = html2canvas.Renderer(queue,{elements:{length:1}}); 
var img = canvas.toDataURL(); 
window.open(img); 

यह मेरे आंकड़ा करने के लिए कुछ घंटे लगते हैं यह, सही तरीके से इसका उपयोग कैसे करें। प्लगइन के अपूर्ण कार्यान्वयन के कारण {elements:{length:1}} आवश्यक है, अन्यथा आपको एक त्रुटि मिलेगी।

गुड लक!

Answer 2

आप निम्न का उपयोग कर सकते हैं:

var html2obj = html2canvas($('body')); 

var queue = html2obj.parse(); 
var canvas = html2obj.render(queue); 
var img = canvas.toDataURL(); 

window.open(img); 

Answer 3

बस पृष्ठ के एक भाग प्राप्त करने के लिए आप इसे इस तरह से उपयोग कर सकते हैं:

$('#map').html2canvas({ 
onrendered: function(canvas) { 
    var img = canvas.toDataURL() 
    window.open(img); 
} 

Answer 4

यह वही मेरे लिए काम किया है।

html2canvas(document.body, { 
    onrendered: function(canvas) { 
    var img = canvas.toDataURL() 
    window.open(img); 
    } 
}); 

इसने स्क्रीनशॉट के लिए एक नई विंडो बनाई।

मैं केवल स्क्रीनशॉट में अपने पृष्ठ का एक हिस्सा चाहता था, विशेष रूप से एक कंटेनर div। तो मैं निम्नलिखित किया:

html2canvas($('#myDiv'), { 
    onrendered: function(canvas) { 
    var img = canvas.toDataURL() 
    window.open(img); 
    } 
}); 

, एक ही सवाल को देख अगर ऊपर दिए गए विकल्पों की मदद नहीं करते हैं, उम्मीद है कि इस वसीयत लोगों के लिए।

Answer 5

आप स्क्रीनशॉट को कैप्चर करने और स्क्रीनशॉट डाउनलोड करने के लिए निम्न कोड का उपयोग कर सकते हैं।

एचटीएमएल बटन निर्माण

<button class="btn btn-default btn-sm" style="margin:0px 0px -10px 970px; padding:2px 4px 1px 4px" onclick="genScreenshot()"><span class="glyphicon glyphicon-envelope"></span></button> 
<a id="test"></a> 
<div id="box1"></div> 

समारोह परिभाषा

<script type="text/javascript">       
function genScreenshot() { 
html2canvas(document.body, { 
    onrendered: function(canvas) { 
    $('#box1').html(""); 

    if (navigator.userAgent.indexOf("MSIE ") > 0 || 
       navigator.userAgent.match(/Trident.*rv\:11\./)) 
     { 
    var blob = canvas.msToBlob(); 
    window.navigator.msSaveBlob(blob,'Test file.png'); 
    } 
    else { 
    $('#test').attr('href', canvas.toDataURL("image/png")); 
    $('#test').attr('download','screenshot.png'); 
    $('#test')[0].click(); 
    } 


    } 
}); 
} 
</script> 

टिप्पणी: मैं एक एचटीएमएल बटन जहाँ मैं समारोह कहा जाता है बनाया है। test एक विशेषता है और box1 कैनवास तत्व प्राप्त करना है।