कैसे js या jQuery का उपयोग कर html में स्क्रीनशॉट लेने

Question

मैं की जरूरत है कर रहा हूँ अपने ग्राहकों को इस तरह बटन का उपयोग कर मेरी वेबसाइट के किसी भी पृष्ठ का स्क्रीनशॉट पर कब्जा करने में सक्षम हो:

<button>Take screenshot</button>

मैंने कोशिश की html2canvas का उपयोग करने के लिए, लेकिन यह मेरे लिए ठीक से काम नहीं करता है क्योंकि मेरे पास मेरी वेबसाइट में आईफ्रेम है और इसके कारण कुछ सत्र समस्याएं हैं।

किसी के पास इसका समाधान है?

मैंने पूरे Google को देखा और मुझे ऐसा कुछ नहीं मिला जो मुझे बहुत मदद करता है।

Answer 1

वेब पेज अपनी प्रकृति के कारण "स्क्रीनशॉट" होने की सबसे अच्छी चीजें नहीं हैं; वे async तत्व, फ्रेम या उस तरह कुछ शामिल कर सकते हैं, वे आमतौर पर उत्तरदायी आदि हैं ...

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

आप की कोशिश करनी चाहिए url2png

Answer 2

आप HTML5 and JavaScript उपयोग कर सकते हैं यह एक नमूना कोड है कि मेरे लिए काम किया है।

(function (exports) { 
    function urlsToAbsolute(nodeList) { 
     if (!nodeList.length) { 
      return []; 
     } 
     var attrName = 'href'; 
     if (nodeList[0].__proto__ === HTMLImageElement.prototype 
     || nodeList[0].__proto__ === HTMLScriptElement.prototype) { 
      attrName = 'src'; 
     } 
     nodeList = [].map.call(nodeList, function (el, i) { 
      var attr = el.getAttribute(attrName); 
      if (!attr) { 
       return; 
      } 
      var absURL = /^(https?|data):/i.test(attr); 
      if (absURL) { 
       return el; 
      } else { 
       return el; 
      } 
     }); 
     return nodeList; 
    } 

    function screenshotPage() { 
     urlsToAbsolute(document.images); 
     urlsToAbsolute(document.querySelectorAll("link[rel='stylesheet']")); 
     var screenshot = document.documentElement.cloneNode(true); 
     var b = document.createElement('base'); 
     b.href = document.location.protocol + '//' + location.host; 
     var head = screenshot.querySelector('head'); 
     head.insertBefore(b, head.firstChild); 
     screenshot.style.pointerEvents = 'none'; 
     screenshot.style.overflow = 'hidden'; 
     screenshot.style.webkitUserSelect = 'none'; 
     screenshot.style.mozUserSelect = 'none'; 
     screenshot.style.msUserSelect = 'none'; 
     screenshot.style.oUserSelect = 'none'; 
     screenshot.style.userSelect = 'none'; 
     screenshot.dataset.scrollX = window.scrollX; 
     screenshot.dataset.scrollY = window.scrollY; 
     var script = document.createElement('script'); 
     script.textContent = '(' + addOnPageLoad_.toString() + ')();'; 
     screenshot.querySelector('body').appendChild(script); 
     var blob = new Blob([screenshot.outerHTML], { 
      type: 'text/html' 
     }); 
     return blob; 
    } 

    function addOnPageLoad_() { 
     window.addEventListener('DOMContentLoaded', function (e) { 
      var scrollX = document.documentElement.dataset.scrollX || 0; 
      var scrollY = document.documentElement.dataset.scrollY || 0; 
      window.scrollTo(scrollX, scrollY); 
     }); 
    } 

    function generate() { 
     window.URL = window.URL || window.webkitURL; 
     window.open(window.URL.createObjectURL(screenshotPage())); 
    } 
    exports.screenshotPage = screenshotPage; 
    exports.generate = generate; 
})(window); 

आप एक डेमो html2canvas परियोजना पर here

Answer 3

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

यह भी उपयोग करना वास्तव में आसान है। यहां एक उदाहरण दिया गया है:

html2canvas(document.body, { 
    onrendered: function(canvas) { 
    document.body.appendChild(canvas); 
    } 
}); 

आप इसे अपने कोड में अपेक्षाकृत आसान बना सकते हैं।

उनके demo पर एक नज़र डालें। किसी भी बटन पर क्लिक करें और फिर पृष्ठ के नीचे स्क्रॉल करें।