キャンバスを使って動画の一瞬をスクリーンショットで撮影する

プリアンブル

今回は、canvas.drawImage()を使用してスクリーンショット機能を実装しています。apiがサポートするdom要素や基本パラメータについては、以下のリンクをクリックしてください。 CanvasRenderingContext2D.drawImage()

処理方法

現在の要件は、マルチプレイヤー動画のある瞬間のスクリーンショットで、ネイティブの video タグで直接動画を表示することです。

1. まずvideo要素を取得し、canvasを作成する

Value cannot be null. parameter name: path1

2. スクリーンショットの画素サイズと最適化

devicePixelRatio は、現在のディスプレイデバイスの物理的なピクセル解像度と CSS ピクセル解像度の比率を返し、リアルなビデオシーンの再現を可能にする、公式の

Argument 'sdklocation' is null or empty

3. キャンバスの扱い

// The canvas size stays the same as the image size, no redundancy in the screenshot
canvas.width = video.offsetWidth * ratio;
canvas.height = video.offsetHeight * ratio;

4. キャンバスを生成し、必要な形式に変換します。ここではbase64に変換します。

canvasCtx.drawImage(video, 0, 0, canvas.width, canvas.height)
const imgBase64 = canvas.toDataURL("image/png");

キャンバスを使ってビデオ動画の一瞬のスクリーンショットを撮るというのが今回の記事です、キャンバス動画のスクリーンショットについての詳しい内容はスクリプトハウスの過去記事を検索するか、以下の関連記事を引き続きご覧ください、今後ともスクリプトハウスをより応援していただけると嬉しいです