使用画布覆盖的视频制作截图

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

谢谢