截取整个网页的屏幕截图 [英] Take screenshot of the whole webpage
本文介绍了截取整个网页的屏幕截图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
需要一个只有javascript的工作代码，没有额外的库文件（ - > jquery，...）
从整个网页截图。 （从上到下）
Need a working code with only javascript and no extra library files (-> jquery,...) That take a screenshot from the whole webpage. (top to bottom page)
目前我有这个不工作为什么？
Current i have this which does not work why?
<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>
推荐答案
这不容易，到浏览器引擎。
由于使用blob（请复制整个网页）。
It's wasn't easy but for the other people look to the browser engine. Because thanks to the use of the blob (kindly clone the whole webpage).
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/
I found you can read more in the chromium project: http://www.html5rocks.com/en/tutorials/streaming/screenshare/
这篇关于截取整个网页的屏幕截图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
