从带有画布覆盖的视频制作屏幕截图

Question

我有一个html5视频，上面有一对兄弟画布，可以在上面做一些效果。其结构类似于：

 <div id="container_video">
     <video id="video1" width="450" height="340" preload="auto"></video>
     <canvas id="overlay" width="450" height="340"></canvas>
     <canvas id="webgl" width="450" height="340"></canvas>
 </div>

我想从整个场景做一个快照，用覆盖画布的视频。我只想捕捉视频，而不是整个场景。

我能做什么?

谢谢。

Answer 1

 <video id="video1" width="450" height="340" preload="auto"></video>
 <canvas id="overlay" width="450" height="340"></canvas>
 <canvas id="webgl" width="450" height="340"></canvas>

 canvas = document.createElement("canvas");
 canvas.width = 450;
 canvas.height = 340;
 var ctx = canvas.getContext("2d");
 var vid = document.getElementById("video1");
 var over = document.getElementById("overlay");
 var gl = document.getElementById("webgl");
 ctx.drawImage(vid,0,0);
 ctx.drawImage(over,0,0);
 ctx.drawImage(gl,0,0);

 // canvas now contains the 3 elements as one image.

您将必须检查视频是否已加载，并在您想要的搜索位置。

Answer 2

@Blindman67它不工作

如果我这样做，我会有下一个错误：

TypeError: canvas.getContext is not a function in 

var ctx = canvas.getContext("2d");

我尝试了另一种方式，就像这样：

var ctx_full = document.getElementById("canvas_full");
ctx = ctx_full.getContext("2d");

var vid = document.getElementById("video1");
var over = document.getElementById("overlay");
var gl = document.getElementById("webgl");

ctx.drawImage(vid,0,0);
ctx.drawImage(over,0,0);
ctx.drawImage(gl,0,0);

然后我会看到错误"TypeError：

Argument 1 of CanvasRenderingContext2D.drawImage could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap. in ctx.drawImage(vid,0,0);

谢谢