如何使用JS或jQuery來捕捉HTML截圖

Question

我需要我的客戶能夠使用按鈕這樣捕捉到我的網站的任何頁面的截圖：

<button>Take screenshot</button>

我試着使用html2canvas但它不能正常工作，因爲我的網站上有iframe，這會導致一些會話問題。

有人有這個解決方案嗎？

我看着所有的谷歌，沒有發現的東西，這對我很有幫助。

Answer 1

由於網頁的性質，網頁並不是最好的東西，他們可以包括異步元素，框架或類似的東西，他們通常是響應等...

爲了您的目的，最好的方法是使用外部API或外部服務，我認爲不是一個好主意嘗試做與JS。

你應該嘗試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); 

你可以找到一個演示here

Answer 3

看那html2canvas項目。他們的方法是他們在畫布內創建頁面的表示。他們沒有製作實際的屏幕截圖，而是基於頁面上的內容和加載的樣式表進行構建。它可以用於整個body或只是一個特定的元素。

它也很容易使用。這裏是一個例子：

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

你可以適應你的代碼相對容易。請看demo。點擊任何按鈕，然後滾動到頁面底部。