Take screenshot of the whole webpage

Question

Need a working code with only javascript and no extra library files (-> jquery,...) That take a screenshot from the whole webpage. (top to bottom page)

Current i have this which does not work why?

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {

var window = document.getElementById('item');
var canvas = document.getElementById('my-canvas');
var ctx = canvas.getContext("2D");
ctx.drawImage(window, 0,0, 100, 200, "rgb(255,255,255)");
canvas.toDataURL("image/png");

});
</script>
</head>
<body id="item">
test website
<canvas id='my-canvas'></canvas>

http://www.html5rocks.com/en/tutorials/streaming/screenshare/ — mplungjan, Apr 08 '13 at 20:25
@mplungjan: It's in the [edit history](http://stackoverflow.com/posts/15884239/revisions). — Robert Harvey, Apr 09 '13 at 15:08
is that visible to everybody? If not, then http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots — mplungjan, Apr 09 '13 at 15:43

score 2 · Accepted Answer · answered Apr 08 '13 at 20:30

It's wasn't easy but for the other people look to the browser engine. Because thanks to the use of the blob (kindly clone the whole 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);
});

I found you can read more in the chromium project: http://www.html5rocks.com/en/tutorials/streaming/screenshare/

This answer does not take a screenshot. It is for "broadcasting" one user's browsing experience to another. It does not yield an image, but markup that can be synched to a viewer's browser via some comms channel, and so it still relies on the recipient being a web browser that can render from HTML/CSS/JS. Quote from the linked article: "Faking the scrolling gives the impression that we've screenshoted a portion of the original page, when in fact, we've duplicated the entire thing and merely repositioned it." — Tom, May 18 '21 at 19:06

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

You could try something like phantom.js. It is a "headless WebKit scriptable with a JavaScript API" that allows you to do screen capture.

From my experience it works well.

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 08 '13 at 21:17

Jarrod

9,349
5
58
73

Yes phantomJS provides a nice framework to take screenshots it can be as simple as page.open(url, function(){ page.render(ss +'.png'); phantom.exit(); }); – relipse May 19 '14 at 13:31
*phantom.js is **sus**pended – RixTheTyrunt Mar 02 '22 at 16:17

Take screenshot of the whole webpage

2 Answers2

Linked