如何拍摄包含视频和画布的div的屏幕截图? [英] How to take screenshot of a div which contains video and canvas?

问题描述

注意:这不是重复的，因为我没有发现与拍摄视频和画布的屏幕截图有关的任何问题，并且我尝试了html2canvas

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

We have a div which internally contains video element and canvas. Video is for streaming and canvas is to draw any thing on that video. Now if I take a screenshot of div, it has to contain the video frame and the drawing. I didn't find any way to get this. I tried html2canvas but it is giving the screenshot of only canvas. Below is code.

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，我认为我将获得视频和画布的组合屏幕截图，因为canvas位于视频之上，并且两者都是remoteScreen div的一部分.但是我只有画布的屏幕截图.可以让我知道是否有任何方法可以将视频+ canvas的屏幕快照组合在一起，或者可以将任何其他配置参数传递给html2canvas以将视频+ canvas的屏幕快照组合在一起吗?

By using html2canvas, I thought I will get combined screenshot of video and canvas as canvas is on top of video and both are part of remoteScreen div. But I got screenshot of canvas only. Can any one please let me know is there any way to get the screenshot of video + canvas combined or can I pass any additional configuration parameters to html2canvas to get the screenshot of video + canvas combined?

推荐答案

html2canvas无法复制视频屏幕截图.它通过读取页面的HTML元素并根据CSS样式信息渲染它们的图片来生成图像.它实际上并不需要截图.

html2canvas cannot reproduce a video screenshot. It generates an image by reading a page's HTML elements and rendering a picture of them according to the CSS styling information. It doesn't actually take a screenshot.

这篇关于如何拍摄包含视频和画布的div的屏幕截图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！