如何截取包含视频和画布的 div 的屏幕截图？答案

【问题标题】：How to take screenshot of a div which contains video and canvas?如何截取包含视频和画布的 div 的屏幕截图？
【发布时间】：2020-08-12 22:17:55
【问题描述】：

注意：这不是重复的，因为我没有找到任何与截取视频和画布相结合的问题，我尝试了 html2canvas

我们有一个内部包含视频元素和画布的 div。视频用于流式传输，画布用于在该视频上绘制任何内容。现在，如果我截取 div 的屏幕截图，它必须包含视频帧和绘图。我没有找到任何方法来得到这个。我尝试了 html2canvas 但它只给出了画布的屏幕截图。下面是代码。

HTML：

<div id="remoteScreen">
    <video id="remoteVideo" autoplay></video>
    <canvas id="remoteCanvas"></canvas>
</div>

<button id="captureButton">Capture</button>

CSS：

video {
  max-width: 100%;
  width: 320px;
}

canvas {
  position: absolute;
  background: transparent;
}

JS：

const captureBtn = document.querySelector("#captureButton");
captureBtn.addEventListener('click', captureCanvasVideoShot);

function captureCanvasVideoShot() {
  html2canvas(document.querySelector("#remoteScreen")).then(function(canvas) {
    document.body.appendChild(canvas);
  });

通过使用 html2canvas，我想我将获得视频和画布的组合屏幕截图，因为画布位于视频之上，并且两者都是 remoteScreen div 的一部分。但我只得到了画布的截图。谁能告诉我有什么办法可以得到视频+画布的截图，或者我可以将任何额外的配置参数传递给html2canvas来获取视频+画布的截图吗？

【问题讨论】：

标签： javascript html5-canvas html5-video html2canvas

【解决方案1】：

html2canvas 无法重现视频截图。它通过读取页面的 HTML 元素并根据 CSS 样式信息渲染它们的图片来生成图像。它实际上并没有截屏。

【讨论】：

谢谢桑普。我使用画布截取了视频的截图，并在此画布上混合了其他画布细节并截取了截图。
很酷的解决方案，@kadina！