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

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);

谢谢