採取整個網頁的屏幕截圖

-2

需要一個只有JavaScript和沒有額外的庫文件（ - > jquery，...）的工作代碼這需要從整個網頁的截圖。（從上到下頁）採取整個網頁的屏幕截圖

當前我有這不起作用爲什麼？

<script type="text/javascript"> 
document.addEventListener('DOMContentLoaded', function() { 

var window = document.getElementById('item'); 
var canvas = document.getElementById('my-canvas'); 
var ctx = canvas.getContext("2D"); 
ctx.drawImage(window, 0,0, 100, 200, "rgb(255,255,255)"); 
canvas.toDataURL("image/png"); 

}); 
</script> 
</head> 
<body id="item"> 
test website 
<canvas id='my-canvas'></canvas>

來源

2013-04-08 user1731468

重新打開...您可以發佈您的答案。 – 2013-04-08 20:21:29

http://www.html5rocks.com/en/tutorials/streaming/screenshare/ – mplungjan 2013-04-08 20:25:17

請鏈接到您找到的副本，Robert – mplungjan 2013-04-08 20:53:14

這並不容易，但對於其他人來看瀏覽器引擎。因爲感謝blob的使用（善意克隆整個網頁）。

urlsToAbsolute(document.images); 
urlsToAbsolute(document.querySelectorAll("link[rel='stylesheet']")); 
urlsToAbsolute(document.scripts); 

var screenshot = document.documentElement.cloneNode(true); 
var blob = new Blob([screenshot.outerHTML], {type: 'text/html'}); 
window.open(window.URL.createObjectURL(blob)); 
screenshot.dataset.scrollX = window.scrollX; 
screenshot.dataset.scrollY = window.scrollY; 
screenshot.style.pointerEvents = 'none'; 
screenshot.style.overflow = 'hidden'; 
screenshot.style.userSelect = 'none'; 

var script = document.createElement('script'); 
script.textContent = '(' + addOnPageLoad_.toString() + ')();'; 
screenshot.querySelector('body').appendChild(script); 

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

我發現你可以閱讀更多的鉻項目： http://www.html5rocks.com/en/tutorials/streaming/screenshare/

來源

2013-04-08 20:30:08 user1731468