canvas與html5實現視頻截圖功能

這段時間一直在研究canvas，突發奇想一想作一個能夠截屏視頻的功能，而後把圖片拉去作表情包，哈哈哈哈哈哈~~

製做方法：

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()方法須要傳入一個參數，這個參數就是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'){
 　　　　returnType= 'ogg'; 　　 
　　 }else if(video.canPlayType('video/webm')=='probably'||video.canPlayType('video/webm')=='maybe'){
 　　　　returnType= 'webm'; 　　 
　　 }
　　 return returnType;

}

這個函數能夠判斷瀏覽器對video支持的格式。

 

1.2使用js動態加載video標籤

這裏判斷了瀏覽器的支持格式後，因爲我用的是chrome，因此個人瀏覽器支持mp4格式的視頻，而後咱們動態建立一個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上，這裏咱們要使用一個函數。drawImage函數的用法

1.drawImage(img,x,y):在畫布的（x,y）這個位置畫一個img；

2.drawImage(img,x,y,width,height):在畫布的（x,y）這個位置畫一個width寬，height高的img；

3.drawImage(img,sx,sy,swidth,sheight,x,y,width,height):在畫布的（x,y）位置畫一個img的（sx,sy）位置的swidth寬，sheight高的一塊截圖，畫在畫布上要縮放到width寬和height高。

以上就是drawImage的用法了，這個函數很是的強大。

 

回到作截圖，咱們如今已經在瀏覽器上建立好了畫布--contextVideo,接着咱們在這裏把視頻畫出來：

contextVideo.drawImage(videoElem,0,0);

而後咱們能夠看到在canvas裏畫了一張圖，可是視頻是不斷變化的，因此咱們須要使用setInterval函數不斷的吧video做爲源來畫圖。

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

這裏時間間隔的大小會影響到視頻播放是否會卡。　　

到這裏咱們就把video搬到canvas上展現了。接下來製做截圖。

 

3.製做截圖展現canvas面板

這裏咱們須要再在頁面上畫一個canvas畫布--contextImg，而後再次利用drawImage方法，截圖。

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

這段代碼將第一個canvas畫到了第二個canvas上。

 

4.製做截圖按鈕

製做一個按鈕，而後綁定click事件，點擊後就調用上一步的函數，這樣就能夠製做一個截圖了。

當圖截好後能夠將圖右鍵保存下來，而後倒入ps製做表情包了。

 

5.demo及一些表情包。

視頻截圖：Demo；(打開以前請調小音量，點擊坐上click便可截圖)

表情包：

 

 

內容原創，轉載請註明出處：

做者：Jess_喵

來源：http://www.cnblogs.com/zhangwenjiajessy/p/6158131.html