Question

我正在尝试使用应该支持所有浏览器的原生javascript来获取完整网页的截图/快照。我已经看到使用blob可以实现这一点，但除非我们使用HTML5文件API，否则无法保存到本地文件目录.Am不确定它是多么的支持。所以考虑将这个blob数据发送到服务器端，以便使用java File API进行进一步处理并保存。我尝试使用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);
});

但问题是能够将克隆的页面视为html，但没有应用正确的CSS和图像也不可见。所以任何人都可以帮助我提出一些想法/建议，将网页截图作为其使用的原始网页核心javascript使用blob？

Answer 1

我们在这里使用html2canvas库。我们使用2个文件，第一个是 Screenshot.html ，第二个是 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完整的WebPage截图

1 个答案: