Full WebPage screenshot using javascript

Original Page

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

Cloned Page using 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 ?

Answers:

Answer

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>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.