ホームページ > 記事 > ウェブフロントエンド > CanvasとH5でビデオスクリーンショット機能を実装する方法

CanvasとH5でビデオスクリーンショット機能を実装する方法

php中世界最好的语言オリジナル: 2018-03-26 11:59:072994ブラウズ

今回はcanvasとh5でvideoスクリーンショット機能を実装する方法を紹介します。一見。この間キャンバスの勉強をしていたのですが、ふと動画のスクリーンショットを撮って、その写真を引っ張ってきて絵文字を作る機能を作ろうと思いつきました、はははははは~~

制作方法:

1.ページビデオの読み込みキャンバスを使用してこのスクリーンショット機能を作成する場合、便利に操作できるように、まずビデオがページにロードされていることを確認する必要があります。

<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 とビデオ」で、ブラウザーがビデオのプリロードの進行状況とロードイベントのサポートを異なると述べましたが、これはビデオの再生とトリガーに影響します。他のイベント。そこでここでは動画を紹介するためにjsを使って動画を構築していきます。

この方法でビデオを紹介する場合は注意してください。複数のソースを紹介することはできないため、最初にブラウザがビデオ形式をサポートしているかどうかを確認する必要があります。

1.1 ビデオの canPlayType() メソッドを使用して、サポートされている形式を決定します canPlayType() メソッドは、ビデオの形式であるパラメータを渡す必要があります

共通の値: video/ogg ;

video/mp4 video/webm; codec="vp8.0, vorbis"

戻り値: Web ページのサポートレベルを示します: "おそらく" - サポートされる可能性が最も高い (入力時にこれのみが返されます)値にはエンコーダがあります); "maybe" - サポートされる可能性があります; "" - (空の

文字列

) はサポートされません。

1.2 js を使用して video タグを動的に読み込みます

ブラウザのサポートされる形式を決定した後、Chrome を使用しているため、ブラウザは mp4 形式のビデオをサポートし、次に video タグを動的に作成します。

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; 
}

ここでスクリーンショット機能を作成したいため、単純なビデオにはスクリーンショットインターフェイスがないため、キャンバスにコピーしてキャンバス上でビデオを再生する必要があるため、ここでは最初にビデオを非表示にします(表示:なし）。

2. キャンバスを使用してビデオをコピーしますブラウザ上でビデオが再生されたので、最初にキャンバスを作成してから、キャンバスのコンテキストを取得しましょう。ここで詳細を説明します。キャンバス上にビデオを描画する方法。ここでは関数を使用する必要があります。 drawImage関数の使い方

1.drawImage(img,x,y): キャンバスの位置(x,y)にimgを描画します

2.drawImage(img,x,y,width,height):描画します。キャンバス上の画像 (x, y) で幅と高さの画像を描画します 3.drawImage(img,sx,sy,swidth,sheight,x,y,width,height): (x,y); Canvas ) の位置に、img の幅と高さのスクリーンショットを (sx, sy) の位置に描画します。キャンバス上に描画するときは、その幅と高さに合わせて拡大縮小する必要があります。

上記はdrawImageの使い方です。この関数は非常に強力です。 スクリーンショットの撮影に戻り、ブラウザ上にキャンバス - contextVideo を作成しました。そして、ここにビデオを描画します:

var videoElem;
var videop;
function createVideo(){
     videoElem=document.createElement("video");//创建video
     videop=document.getElementById("videopanel");//获取video的外层容器
     videop.appendChild(videoElem);
     var vtype=videoType(videoElem);//判断浏览器支持的格式
     if(vtype==""){
        videop.innerHtml('不支持video')
    }else{
        videoElem.setAttribute('src',"text."+vtype);
    }
}

すると、キャンバスに画像が描画されていることがわかりますが、ビデオは常に変化していますしたがって、setInterval 関数を使用して、画像を描画するソースとしてビデオを継続的に使用する必要があります。

contextVideo.drawImage(videoElem,0,0);

ここでの時間間隔の長さは、ビデオの再生がフリーズするかどうかに影響します。

この時点で、表示のためにビデオをキャンバスに移動しました。次にスクリーンショットを作成します。

3. スクリーンショットを作成してキャンバスパネルを表示します

ここでは、ページ上に別のキャンバス - contextImg を描画する必要があります。その後、drawImage メソッドを再度使用してスクリーンショットを撮ります。

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

这段代码将第一个canvas画到了第二个canvas上。

4.制作截图按钮

制作一个按钮，然后绑定click事件，点击后就调用上一步的函数，这样就可以制作一个截图了。

当图截好后可以将图右键保存下来，然后倒入ps制作表情包了。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

CanvasとH5でビデオスクリーンショット機能を実装する方法

関連記事