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

日期:2021-02-24 类型:科技新闻 

关键词:如何创建网站,免费网站建站,网站建设文章,网站建设7个基本流程,自动建站

这段時间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制做小表情包了。

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