使用javascript的完整网页截图 [英] Full WebPage screenshot using javascript
问题描述
我正在尝试使用应支持所有浏览器的本机javascript截取整个网页的屏幕快照/快照.我已经看到使用blob可以实现此目的，但除非我们使用HTML5 File API，否则它无法保存到本地文件目录中.不确定是否可以提供支持.因此，考虑使用Java File API将此blob数据发送到服务器端进行进一步处理并保存.我尝试了以下使用blob克隆网页的代码.
I am trying to take the screenshot/snapshot of the full webpage using native javascript that should support all browsers.I have seen that using blob can achieve this but it cannot save to local file directory unless we use HTML5 File APIs.Am not sure how supportive it could be.So thinking of sending this blob data to server side for further processing using java File APIs and save it.I tried the below code which uses blob to clone the 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);
});
但是问题是能够将克隆的页面显示为html但未应用适当的CSS并且图像也不可见.因此任何人都可以帮助我提出一些想法/建议来将网页的屏幕截图作为原始屏幕截图使用核心JavaScript使用Blob吗?
But the issue is am able to see the cloned page as a html but without applying proper css and images are also not visible.So could anyone help me with some ideas/suggestions to take the screenshot of webpage as original as its using core javascript using blob ?
推荐答案
我们在这里使用html2canvas库.我们使用2个文件，第一个是 Screenshot.html ，第二个是 screen.css
We are using here html2canvas library. we are using 2 file first Screenshot.html and second one is screen.css
#box1 {
width:400px;
height:300px;
border-style: solid;
border-width: 2px;
}
canvas {
max-width: 100%;
max-height: 100%;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
body {
background-color: hsl(89, 43%, 51%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<head>
<link rel="stylesheet" href="screen.css">
</head>
<body>
<a href="javascript:genScreenshot()"> <button style="background:red; cursor:pointer">click me</button></a>
<a id="test"></a>
<div id="text">
Get Screenshot this page
<h2>HTML Table</h2>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</table>
</div>
<br>
<div id="box1">
</div>
<script>
function genScreenshot() {
html2canvas(document.body, {
onrendered: function(canvas) {
$('#box1').html("");
$('#box1').append(canvas);
if (navigator.userAgent.indexOf("MSIE ") > 0 ||
navigator.userAgent.match(/Trident.*rv\:11\./))
{
var blob = canvas.msToBlob();
window.navigator.msSaveBlob(blob,'Test file.png');
}
else {
$('#test').attr('href', canvas.toDataURL("image/png"));
$('#test').attr('download','Test file.png');
$('#test')[0].click();
}
}
});
}
</script>
</body>
这篇关于使用javascript的完整网页截图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
