wie Screenshot in html erfassen js oder jquery mit

Question

ich meinen Kunden Screenshot von einer Seite auf meiner Website mit der Taste so erfassen können, müssen:

<button>Take screenshot</button>

Ich habe versucht, um html2canvas zu benutzen, aber es funktioniert nicht richtig für mich, weil ich iframes in meiner website habe und es einige sitzungsprobleme verursacht.

jemand eine Lösung dafür haben?

Ich schaute überall auf Google und fand nicht etwas, das mir viel hilft.

Answer 1

Webseiten sind nicht die besten Dinge, die wegen ihrer Natur "screenshoted" werden; Sie können asynchrone Elemente, Frames oder ähnliches enthalten, sie sind normalerweise reaktionsfähig usw.

Für Ihren Zweck ist der beste Weg, externe API oder einen externen Service zu verwenden, denke ich, ist keine gute Idee zu versuchen das mit JS.

sollten Sie versuchen, url2png

Answer 2

Sie HTML5 and JavaScript dies ist ein Beispielcode, der für mich gearbeitet verwenden können.

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

können Sie eine Demo here

Answer 3

Blick auf das html2canvas Projekt. Ihre Vorgehensweise besteht darin, dass sie eine Darstellung der Seite innerhalb einer Zeichenfläche erstellen. Sie erstellen keinen tatsächlichen Screenshot, sondern bauen ihn basierend auf dem Inhalt auf der Seite und dem geladenen Stylesheet auf. Es könnte auf der gesamten body oder nur ein bestimmtes Element verwendet werden.

Es ist auch sehr einfach zu bedienen. Hier ein Beispiel:

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

Sie können es relativ einfach an Ihren Code anpassen.

Werfen Sie einen Blick auf ihre demo. Klicken Sie auf eine der Schaltflächen und scrollen Sie dann zum Ende der Seite.