Full WebPage screenshot using javascript

问题

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);
});

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 ?

回答1:

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>

来源：https://stackoverflow.com/questions/35339096/full-webpage-screenshot-using-javascript

标签

javascript

blob