Full WebPage screenshot using javascript
<p><a href="https://i.stack.imgur.com/Qp4la.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qp4la.png" alt="Original Page"></a></p>

<p>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.</p>

<pre><code>    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);
});
</code></pre>

<p><a href="https://i.stack.imgur.com/YJSKt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YJSKt.png" alt="Cloned Page using blob"></a></p>

<p>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 ?</p>