是否有浏览器提供的 API 可以直接截取页面 dom 的屏幕截图？

Question

我没有找到任何直接支持 dom 捕获的 API。但是 html2canvas 和 kendo.drawing.drawDom libraries 占用了大量资源，这可能会影响我的应用程序的性能。

我无法在 Worker 中运行这些，因为这些库需要 dom 才能工作，但 Worker 不共享 dom。

由于大多数浏览器显示最近访问过的页面的缩略图视图(Firefox has the screenshot utility too)，我们可以使用此支持吗？

我的要求是在用户导航到页面时捕获打开的页面（在后台，否则会影响应用程序性能）的 dom。我无法控制浏览器（可以是任何浏览器）或用户在页面上停留的时间（页面可能处于隐藏状态 [显示：none 或可见性：隐藏]）。我正在使用 Jquery-3.1.1 和 Kendo.Ui.

Answer 1

（据我所知）没有官方 API 使用浏览器的截屏功能。

解析和重新绘制整个 DOM 的库仍然是唯一的 cross-browser 方法。

最近的 API 是正在定义的 MediaCapture。

目前，只有 Firefox 通过 MediaDevices.getUserMedia API 允许我们访问类似的东西，并且 chrome 允许特权代码（扩展）使用其他实现。

因此 对于 Firefox，您已经可以执行类似

的操作

async function takeScreenshot() {
  const stream = await navigator.mediaDevices.getUserMedia(
    {
      video: {
        mediaSource: 'window'
      }
    }
  );
  const vid = document.createElement('video');
  vid.srcObject = stream;
  await vid.play();
  const canvas = document.createElement('canvas');
  canvas.width = vid.videoWidth;
  canvas.height = vid.videoHeight;
  canvas.getContext('2d').drawImage(vid, 0,0);
  stream.getTracks().forEach(t=>t.stop());
    return new Promise((res, rej) => {
    canvas.toBlob(res);
  });
}

Fiddle since I guess it won't work in over-protected StackSnippet®.

Answer 2

好的，因为我没有 50 的声誉来评论答案..这只是 @Kaiido 的答案的扩展。

如果你想让 fiddle 在 Chrome 中工作，只需在第二行代码中将 getUserMedia() 更改为 getDisplayMedia()（它仍然可以在 Firefox 上工作).

我个人认为getDisplayMedia()在这种情况下可能更合适，getDisplayMedia vs getUserMedia。

是否有浏览器提供的 API 可以直接截取页面 dom 的屏幕截图？

Are there any browser provided APIs to capture a screenshot of the dom of a page directly?

javascript

browser

firefox

google-chrome

html2canvas