ビデオとキャンバスを組み合わせてオンラインビデオスクリーンショット機能を実現

数日前に私が見た興味深い小さなデモについて説明しましょう。ビデオのオンライン スクリーンショットです。新しい機能を変更して追加した後のレンダリングは次のとおりです。

とても簡単です。その方法を以下に説明します。

主に 3 つの主要な機能に分かれており、1 つ目は次のとおりです。

URL オブジェクトを使用してビデオ リンクを取得し、表示します。

jsのURLオブジェクトにはcreateObjectURLメソッドがあり、ファイル(Fileオブジェクト)のURLを取得し、video要素のsrc属性に挿入することで動画を表示することができます。もちろん、File オブジェクトを取得するには、input 要素の使用やドラッグなど、いくつかの方法があります。完全なコード スニペット:

 <input type=file/>document.querySelector('input[type=file]').addEventListener('change',function () { document.querySelector('video').src = window.URL.createObjectURL(this.ファイル[0])})

もちろん、ソースコードにこのように書いたわけではなく、単にデモを行うためです。 URL のより具体的な使用方法については、この記事または MDN を参照してください。

次のステップは重要なステップですが、これも非常に簡単です。つまり、canvas のdrawImage メソッドを使用します。Elevation 3 のセクション 15.2.6 に目を向けると、drawImage メソッドの使用方法が説明されていることがわかります。非常に詳細ですが、省略されています。つまり、video 要素もdrawImage メソッドに渡すことができ、グラフィックスを描画できるということです。具体的なコードスニペット:

 var Canvas = document.createElement(canvas);var CanvasCtx = Canvas.getContext(2d);var video=document.querySelector('video');//元の画像の x、y 軸座標とサイズを入力し、ターゲット画像のx、y軸ラベル、サイズ。 CanvasCtx.drawImage(video, 0, 0, videoWidth, videoHeight, 0, 0, imgWidth, imgHeight);//base64 アイコンを URL 文字列にエンコードします var dataUrl = Canvas.toDataURL(image/png);// 画像を挿入しますsrc 属性に document.createElement('img').src=dataUrl;

画像を描画したら、canvas の toDataURl メソッドを呼び出して、画像を Base64 でエンコードされた URL に変換し、img 要素に挿入して表示します。サムネイル画像の作成は完了です。写真と Base64 の関係については、学生向けのこの記事を参照してください。

このアニメーションを実装する主な原則は、まずビデオの元の場所にビデオと同じサイズの大きな画像を作成し、それを絶対レイアウト (position:absolut) に設定し、サムネイルが実際に配置される場所に小さな画像を作成します。を選択し、非表示（可視性：非表示）に設定すると、大きな画像が左と上に移動し、幅と高さが実際のサムネイルが配置されている場所に縮小され、アニメーション効果が形成されます。最後に、大きい画像を削除し、小さい画像を表示します。具体的なコードスニペット:

関数 getOffset(elem) { var pos = {x: elem.offsetLeft, y: elem.offsetTop}; var offsetParent = elem.offsetParent; while (offsetParent) { pos.x += offsetParent.offsetLeft; .offsetTop; offsetParent.offsetParent; }

この関数は、小さなピクチャとビューポート (ビューポート) の間の距離を取得し、それを変位パラメータとして大きなピクチャに提供するものです。Elevation 3 のセクション 12.2.3 にはほぼ同じコードがあり、詳細な手順と代替の getBoundingClientRect 関数が含まれています。についても触れられていましたので詳しくは本を読んでください。

次のコードは、大きな画像と小さな画像を作成し、アニメーション効果を実現するためのものです。利便性と理解を容易にするために、ここでは JQuery を使用します

 var $imgBig = $(<img/>);//元のビデオである大きな画像の初期位置を設定します。 $imgBig.css({ 位置: 絶対, 左: video.offsetLeft, 上: video.offsetTop, 幅: video.offsetWidth+ px, 高さ: video.offsetHeight+ px}).attr(src, dataUrl);var $img = $ (<img/>);$img.hide();//大きな画像のアニメーション効果を実現するために、小さな画像の距離パラメータを取得します。 var offset = getOffset($img[0]);//アニメーション効果を追加 $imgBig.animate({ left: offset.x + px, top: offset.y + px, width: $img.width() + px,高さ: $img.height() + px}, 500, function () { $img.show();});

メインのコード部分についてはこれで終わりです。もちろん、特定の実装やその他の機能にはまだ多くの詳細な問題があるため、詳しくは説明しません。読んでからにしてください。ソースコードについて質問します。

以下は私のソースコードのアドレスです。試してみてください。

github 上のデモ

上記は、オンラインビデオスクリーンショット機能を実現するために編集者が紹介したビデオです。ご質問があれば、メッセージを残してください。編集者が返信します。時間。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！