Capture only current viewport not whole body as screenshot

Question

I'm using html2canvas to capture a screenshot of a site on different devices and send them to a storage via a XMLHTTPRequest.

Especially on sites with a lot of content the resulting screenshots tend to be very high and large, although most of the information in the screenshot is not relevant to what I need to caputure.

I've been trying to temper with the canvas element to have it only contain what I am currently seeing in the browser instead of capturing the whole body of the page, but without success.

Is it possible to tweak html2canvas in a way that allows to only capture the current window instead of the whole body?

Currently used code is:

html2canvas(document.body).then(function(canvas) {
        var img = canvas.toDataURL("image/png");
        ajax_post(img); 
    });

score 7 · Answer 1 · answered Dec 29 '20 at 22:04

7

The existing answer isn't supported anymore, here is how I did it:

html2canvas(document.body, {
  x: window.scrollX,
  y: window.scrollY,
  width: window.innerWidth,
  height: window.innerHeight,
});

answered Dec 29 '20 at 22:04

Collierre

946
8
16

score 3 · Answer 2 · answered Nov 25 '15 at 16:45

3

The question is old but I had the same question, I looked at the code of html2canvas 5 and found how to do that.

Since other people could search for the same thing, here is the answer, just set the options.type to 'view':

html2canvas(document.body, { type: 'view' }).then(function(canvas) {
var img = canvas.toDataURL("image/png");
    ajax_post(img); 
});

answered Nov 25 '15 at 16:45

acemtp

2,971
6
34
43

This does not seem to be supported anymore. Any alternatives? – undefined Dec 05 '20 at 16:13

score 1 · Answer 3 · edited Apr 01 '21 at 08:05

1

This code just works and is simple

html2canvas(document.body, { x: window.scrollX, y: window.scrollY, width: window.innerWidth, height: window.innerHeight, });

window.scrollX; Returns the number of pixels that the document has already been scrolled horizontally.

window.innerWidth and window.innerHeight; Returns the current frame's height and width:

edited Apr 01 '21 at 08:05

Zahra

2,231
3
21
41

answered Mar 29 '21 at 12:02

Muhammad Ali

51
4

Capture only current viewport not whole body as screenshot

3 Answers3