從帶有畫布覆蓋的視頻制作屏幕截圖

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

謝謝