3

緑の背景のビデオがあります。この緑色のセクション (クロマ キー) を削除して透明にし、ウェブサイトの背景の上にビデオを表示したいと考えています。

画像を使用する複雑なコードしか見つかりません。

4

1 に答える 1

2

開始情報:はvideo element、html5 キャンバスのイメージ ソースにすることができます。つまり、ビデオのフレームをキャンバスに描画 (およびキャンバスで操作) できます。

概要:このcontext.getImageDataメソッドは、キャンバスの RGBA ピクセル データを配列で取得します。配列のピクセル データを変更した後context.putImageData、変更されたピクセルをキャンバスに戻します。

計画CSS を使用して、サイトの背景の上に html5 キャンバスを配置します。そのキャンバスを使用して、サイト上にビデオ フレームを描画します (緑がかったビデオ ピクセルを透明にして、サイトの背景が透けて見えるようにします)。

(一部の組み立てと学習が必要です) :

Web サイトの背景を覆う html5 キャンバス要素を配置します。

タイム ループ内 ( requestAnimationFrame):

  1. キャンバスをクリア: context.clearRect,
  2. キャンバスにビデオ フレームを描画します: context.drawImage(video,0,0),
  3. キャンバスからピクセル データを取得します: context.getImageData,
  4. 各ピクセルの「緑っぽい色」を確認してください: if(green>220 && red<20 && blue<20),
  5. ピクセルが緑がかった場合は、透明にします: (alpha=0),
  6. 変更したピクセルをキャンバスに戻します: context.putImageData,
  7. ビデオが終了するまで #1 を繰り返します。

学習に役立つリファレンス

＃2に関するStackoverflowの以前の投稿：ビデオタグをCanvasタグに配置します

＃3-6に関するStackoverflowの以前の投稿：画像内のピクセルをループする

于 2015-12-13T18:58:37.527 に答える