1

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 ?

Aish
  • 31
  • 2
  • 7
  • 1
    Your approach is only copying across the HTML from the DOM, omitting styling entirely. You could try a project like [dom-to-image](https://github.com/tsayen/dom-to-image) but even then, browser support is limited. – Graham Feb 11 '16 at 12:19
  • See this: https://github.com/niklasvh/html2canvas – Joseph Feb 11 '16 at 13:09
  • Any other alternate using core javascript alone since am not sure whether i can use the 3rd party library. – Aish Feb 12 '16 at 10:13
  • Hi,am trying to send the webpage's html data to server and use html2Image Java API to convert to image.i tried using loadHTML() , loadURL() functions and save to image.Both these cases , image is saved.But the css/images of webpage were not present.its like a plain HTML again.Any help is appreciated. – Aish Feb 15 '16 at 08:15

1 Answers1

3

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>
The Coding Bus
  • 443
  • 1
  • 6
  • 19
  • Hi Rudra Pratap, add a short introduction to your code can you elaborate how the code works or leave comments in the code itself? The will help anyone visiting this later to understand how this works. Thanks! – Roy Scheffers Aug 17 '18 at 08:14