采取整个网页的屏幕截图

问题描述：

需要一个只有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 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/

答

你可以尝试像phantom.js。它是一个“带JavaScript API的无头WebKit脚本”，可让您执行屏幕截图。

从我的经验来看，它运作良好。

是phantomJS提供了一个很好的框架来采取截图，它可以像page.open（url ，function（）{ \t page.render（ss +'。png'）; \t phantom.exit（）; }）; – relipse 2014-05-19 13:31:44

采取整个网页的屏幕截图

相关推荐