canvas截取视频中的图片,canvas绘制视频
学了一段时间画布，突发奇想做了一个可以抓拍视频的功能，然后拉图做了一个表情包，哈哈哈哈哈哈~ ~
制作方法：
1.在页面中加载视频
在使用canvas制作这个截图功能的时候，首先要保证页面上已经加载了视频，这样才能方便操作。如果使用以下方法直接嵌入视频标签:
视频循环控件id= test MP4 width= 500 height= 400 source src= test . MP4 type= video/MP4 source src= test . webm type= video/Web source src= test . ogg type= video/ogg /video在我的文章《html5与视频》中指出浏览器对视频预加载进度和加载事件的支持不同，会影响视频的播放和其他事件的触发所以这里我们用js构造视频来介绍视频。
这种方式引入视频你要注意。不能引入多个片源，首先要判断浏览器对视频格式的支持。
1.1使用video的canPlayType()方法判断支持格式
canPlayType()方法需要传入一个参数，是视频的格式，
常见的价值观：视频/ogg；
视频/MP4；
视频/webm；
或者包括编码器：
视频/ogg；编解码器=theora，vorbis
视频/MP4；编解码器=avc1.4D401E，mp4a.40.2
视频/webm；codesc=vp8.0，vorbis
返回值：表示网页的支持级别：‘大概’——最可能的支持(只有输入值带编码器时才返回这个)；可能-可能支持；-(空字符串)不受支持；
函数video type(video){ var returnType= ；if(video . canplaytype( video/MP4 )==大概 video . canplaytype( video/MP4 )==大概){ returnType= mp4} else if(video . canplaytype( video/ogg )==大概 video . canplaytype( video/ogg )==大概){ br returnType= oggbr } else if(video . canplaytype( video/webm )==大概 video . canplaytype( video/webm )==大概){ br returnType= webmbr } br return returnType}该功能可以判断浏览器对视频支持的格式。
1.2使用js动态加载video标签
在这里判断了浏览器支持的格式之后，由于我使用的是chrome，所以我的浏览器支持mp4格式的视频，然后我们动态创建一个视频标签。
var videoElemvar videoDiv函数create video(){ video elem=document . createelement( video )；//Create video div=document . getelementbyid( video panel )；//获取video的外部容器video div . appendchild(video elem)；var vtype=video type(video elem)；//确定浏览器支持的格式if(vtype== ){ video div . innerhtml(不支持视频)} else { video elem . set attribute( src ， text。vtype)；}}因为这里我们要做截图功能，纯视频没有截图的界面，所以我们要把它复制到canvas上，在canvas上播放这个视频，所以这里先把视频隐藏起来(显示：无)。
2.使用canvas复制视频
既然视频已经在浏览器上播放了，那我们就把它复制到canvas中，先构建canvas，再获取Canvas上下文，就不说这个了。如何在画布上画视频？这里我们将使用一个函数。drawImage函数的用法
1.drawImage(img，x，y):在画布上的(x，y)位置画一个img；
2.DrawImage (img，x，y，width，height):在画布的(x，y)位置绘制一个width wide，height high的img；
3.DrawImage (img，sx，sy，swidth，height，x，y，width，height):在画布上的(x，y)位置绘制img的(sx，sy)位置的swidth宽度和高度的截图，缩放到画布上的宽度宽度和高度。
这就是drawImage的用法。这个功能非常强大。
回到截图，我们现在已经在浏览器上创建了canvas - contextVideo，然后我们在这里绘制视频：
context video . draw image(video elem，0，0)；然后我们可以看到一张图片是用画布画的，但是视频是不断变化的，所以我们需要用setInterval函数来画以视频为源的图片。
setInterval(function(){ br context video，drawImage(videoElem，0，0)；Br}，100)这里时间间隔的大小会影响视频播放是否会卡顿。
此时，我们将视频移动到画布上来显示它。接下来，做个截图。
3.制作截图展示canvas面板
这里我们需要在页面上绘制一个canvas canvas-context timg，然后再次使用drawImage方法进行截图。
context img . draw image(canvas video，0，0，canvasVideo.width，canvas video . height)；这段代码将第一个画布绘制到第二个画布上。
4.制作截图按钮
做一个按钮，然后绑定click事件，点击后调用前面的函数，这样就可以截图了。
图片剪好后，可以右击保存，然后倒入ps做一个表情包。
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。