canvas与html5完成视頻截图作用示例

这段時间1直在科学研究canvas，心血来潮想做1个能够截屏视頻的作用，随后把照片拉去做小表情包，哈哈哈哈哈哈~~

制做方式：

1.在网页页面中载入视頻

在应用canvas制做这个截图作用时，最先务必确保网页页面上早已载入进行了这个视頻，这样才可以够便捷的对其实际操作。假如应用下面立即嵌入<video>标识的方法：

<video loop controls id="testmp4" width="500" height="400" >    

<source src="test.mp4" type="video/mp4">  

<source src="test.webm" type="video/webm">   

<source src="test.ogg" type="video/ogg">

</video> 

在我的那篇《html5与视頻》中讲到，访问器对视頻的预载入progress和load恶性事件适用不一样，会危害video的播发及别的恶性事件的开启。因此大家在这里应用js结构video的方法来引进视頻。

这类方法引进视頻要留意，不可以引进好几个source，因此要先分辨访问器对视頻文件格式的适用。

1.1应用video的canPlayType()方式分辨适用文件格式

canPlayType()方式必须传入1个主要参数，这个主要参数便是video的文件格式，

常见值：video/ogg;

　　　　video/mp4;

　　　　video/webm;

或包含编号器：

　　　　video/ogg;codecs="theora,vorbis"

　　　　video/mp4;codecs="avc1.4D401E, mp4a.40.2"

　　　　video/webm;codesc="vp8.0, vorbis"

回到值：表明网页页面的适用级別:"probably"-最有将会适用(键入值带编号器的情况下只回到这个);"maybe" - 将会适用；"" - （空标识符串）不适用；

function videoType(video){

    var returnType='';

    if(video.canPlayType('video/mp4')=='probably'||video.canPlayType('video/mp4')=='maybe'){

    　　returnType= 'mp4';

    }else if(video.canPlayType('video/ogg')=='probably'||video.canPlayType('video/ogg')=='maybe'){<br> 　　　　returnType= 'ogg'; 　　 <br>　　 }else if(video.canPlayType('video/webm')=='probably'||video.canPlayType('video/webm')=='maybe'){<br> 　　　　returnType= 'webm'; 　　 <br>　　 }<br>　　 return returnType; 


} 

这个涵数能够分辨访问器对video适用的文件格式。

 1.2应用js动态性载入video标识

这里分辨了访问器的适用文件格式后，因为我用的是chrome，因此我的访问器适用mp4文件格式的视頻，随后大家动态性建立1个video标识。

var videoElem;

var videoDiv;

function createVideo(){

     videoElem=document.createElement("video");//建立video

     videoDiv=document.getElementById("videopanel");//获得video的外层器皿

     videoDiv.appendChild(videoElem);

     var vtype=videoType(videoElem);//分辨访问器适用的文件格式

     if(vtype==""){

        videoDiv.innerHtml('不适用video')

    }else{

        videoElem.setAttribute('src',"text."+vtype);
    }
}         

因为这里大家要制做截图作用，单纯性的video不具有截图的插口，因此大家要把它拷贝到canvas上，在canvas上播出这个视頻，因此这里大家先把video给掩藏掉(display:none)。

2.应用canvas拷贝视頻

如今video早已在访问器上播发了，接下来大家把它拷贝到canvas里，最先创建canvas，随后获得画布context，这些就不说了。怎样把video画在canvas上，这里大家要应用1个涵数。drawImage涵数的用法

1.drawImage(img,x,y):在画布的（x,y）这个部位画1个img；

2.drawImage(img,x,y,width,height):在画布的（x,y）这个部位画1个width宽，height高的img；

3.drawImage(img,sx,sy,swidth,sheight,x,y,width,height):在画布的（x,y）部位画1个img的（sx,sy）部位的swidth宽，sheight高的1块截图，画在画布上要放缩到width宽和height高。

以上便是drawImage的用法了，这个涵数十分的强劲。

返回做截图，大家如今早已在访问器上建立好了画布--contextVideo,接着大家在这里把视頻画出来：

contextVideo.drawImage(videoElem,0,0);

随后大家能够看到在canvas里画了1张图，可是视頻是持续转变的，因此大家必须应用setInterval涵数持续的吧video做为源来画图。

setInterval(function(){<br>    contextVideo,drawImage(videoElem,0,0);<br>},100) 

这里時间间距的尺寸会危害到视頻播发是不是会卡。　　

到这里大家就把video搬到canvas上展现了。接下来制做截图。

 3.制做截图展现canvas面板

这里大家必须再在网页页面上画1个canvas画布--contextImg，随后再度运用drawImage方式，截图。

contextImg.drawImage(canvasVideo,0,0,canvasVideo.width,canvasVideo.height); 

这段编码将第1个canvas画到了第2个canvas上。

4.制做截图按钮

制做1个按钮，随后关联click恶性事件，点一下后就启用上1步的涵数，这样便可以制做1个截图了。

当图截好后能够将图右键储存下来，随后倒入ps制做小表情包了。

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。