仅捕获当前视口而不是整个身体作为屏幕截图

Question

我正在使用html2canvas捕获不同设备上的站点的屏幕截图，并通过XMLHTTPRequest将它们发送到存储。

特别是在内容丰富的网站上，截取的截图往往非常高且很大，但屏幕截图中的大部分信息与我需要捕捉的内容无关。

我一直试图用canvas元素来调整它只包含我目前在浏览器中看到的内容而不是捕获整个页面，但没有成功。

是否可以以允许仅捕获当前窗口而不是整个身体的方式调整html2canvas？

目前使用的代码是：

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

Answer 1

这个问题已经过时但是我有同样的问题，我查看了html2canvas 5的代码并找到了如何做到这一点。

由于其他人可以搜索相同的内容，这里就是答案，只需将options.type设置为＆＃39; view＆＃39;：

#menu

Answer 2

不再支持现有答案，我是这样做的：

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

Answer 3

此代码有效且简单

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

window.scrollX; 返回文档已经水平滚动的像素数。

window.innerWidth 和 window.innerHeight; 返回当前帧的高度和宽度：