使用畫布覆蓋的視頻製作截圖

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

謝謝