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

时间:2016-08-12 10:09:49

标签: javascript html5 video canvas

我的html5视频带有一对兄弟画布,可以对它产生一些影响。结构是这样的:

bs

我想从整个场景拍摄快照,带有叠加画布的视频。我只能抓住视频,但不是整个场景。

我该怎么办?

感谢。

1 个答案:

答案 0 :(得分:0)

 <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.

您必须检查已加载的视频和所需的搜索位置。