come catturare screenshot in html utilizzando js o jQuery

Question

sto bisogno dei miei clienti siano in grado di catturare screenshot di qualsiasi pagina del mio sito web utilizzando il pulsante in questo modo:

<button>Take screenshot</button>

ho provato utilizzare html2canvas ma non funziona correttamente per me perché ho iframe nel mio sito Web e causa alcuni problemi di sessione.

qualcuno ha una soluzione per questo?

ho cercato su google e non ho trovato qualcosa che mi aiuti molto.

Answer 1

Le pagine Web non sono le migliori cose da "schermare", a causa della loro natura; possono includere elementi asincroni, cornici o qualcosa del genere, di solito sono reattivi ecc ...

Per il tuo scopo il modo migliore è usare l'api esterna o un servizio esterno, penso che non sia una buona idea provare a fare quello con JS.

Si dovrebbe cercare url2png

Answer 2

si può usare HTML5 and JavaScript questo è un esempio di codice che ha funzionato per me.

(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); 

è possibile trovare una demo here

Answer 3

Guardate il progetto html2canvas. Il loro approccio è che creano una rappresentazione della pagina all'interno di una tela. Non creano uno screenshot effettivo, ma lo costruisce in base al contenuto della pagina e al foglio di stile caricato. Potrebbe essere utilizzato sull'intero body o solo su un elemento specifico.

È anche molto facile da usare. Ecco un esempio:

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

È possibile adattarlo al codice relativamente facile.

Dai un'occhiata al loro demo. Fare clic su uno dei pulsanti e quindi scorrere fino alla fine della pagina.