canvas與html5實現(xiàn)視頻截圖功能示例(3)

這個函數(shù)可以判斷欣賞器對video支持的格式。

 1.2使用js動態(tài)加載video標簽

這里判斷了欣賞器的支持格式后，因為我用的是chrome，所以我的欣賞器支持mp4格式的視頻，然后我們動態(tài)創(chuàng)建一個video標簽。

var videoElem;

var videoDiv;

function createVideo(){

     videoElem=document.createElement("video");//創(chuàng)建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已經(jīng)在欣賞器上播放了，接下來我們把它復制到canvas里，首先建立canvas，然后得到畫布context，這些就不說了。如何把video畫在canvas上，這里我們要使用一個函數(shù)。drawImage函數(shù)的用法

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的用法了，這個函數(shù)特別很是的壯大。

回到做截圖，我們?nèi)缃褚呀?jīng)在欣賞器上創(chuàng)建好了畫布--contextVideo,接著我們在這里把視頻畫出來：

contextVideo.drawImage(videoElem,0,0);

然后我們可以看到在canvas里畫了一張圖，但是視頻是賡續(xù)轉(zhuǎn)變的，所以我們必要使用setInterval函數(shù)賡續(xù)的吧video作為源來畫圖。

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

這里時間間隔的大小會影響到視頻播放是否會卡?！　?/p>

到這里我們就把video搬到canvas上展示了。接下來制作截圖。

 3.制作截圖展示canvas面板

這里我們必要再在頁面上畫一個canvas畫布--contextImg，然后再次行使drawImage方法，截圖。

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

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

4.制作截圖按鈕

制作一個按鈕，然后綁定click事件，點擊后就調(diào)用上一步的函數(shù)，如許就可以制作一個截圖了。

當圖截好后可以將圖右鍵保存下來，然后倒入ps制作表情包了。

以上就是本文的悉數(shù)內(nèi)容，盼望對大家的學習有所幫助，也盼望大家多多支持圖趣網(wǎng)。