JavaScript を使用してグリーン スクリーン アルゴリズムを実装する

緑の背景画像が変更され、緑を使用するエフェクトやその他の画像に置き換えられました。 スクリーン アルゴリズム。クロマ キー アルゴリズムとも呼ばれます。要するに、私たちがやっていることは、 前方イメージ内のすべての緑色のピクセルを、後方イメージ内の対応する対応するピクセルと交換します。 背景画像。

また、出力画像のサイズは出力画像のサイズと一致する必要があることを覚えておく必要があります。 前向きのイメージ。次のステップでは、前方画像から新しい画像にピクセルをコピーします。 画像。緑色のピクセルをコピーする代わりに、背景画像から一致するピクセルを使用します。

次のコードを適用する前に、必ず次のソース ファイルを HTML コードに含めてください。 コード -

リーリー

このアルゴリズムを実装するために必要な JavaScript コードを以下に示します。それを使用するには、作成する必要があります 独自の HTML コードを記述します。

HTMLソースコード

この HTML コードを HTML ドキュメントの要素に追加する必要があります。

リーリー

CSSソースコード

次に、HTML ドキュメント内の CSS コードです。

リーリー

JavaScript ソースコード

次の JavaScript コード <script> を HTML ドキュメントの </script>

タグに追加する必要があります リーリー ＃＃＃例＃＃＃

次に、完全なコードと次のコードの出力を確認してみましょう。

リーリー

画像を追加しなくても、この出力画面が表示されます。

次に、「最初の画像」と「背景画像」の画像を追加すると、この出力画面が表示されます。

[画像を結合] ボタンをクリックすると、最終出力が表示されます。どちらの写真も 組み合わせを以下に示します。

2 つの画像がアルゴリズムへの入力として使用されます。最初の画像は背景付きの最初の画像です 緑、2 番目は緑の代わりに使用する背景画像です 背景。

JavaScript は 2 つの画像を入力として受け取った後に結合するため、遅延が発生します。 この画像は、前方画像の緑色の背景を置き換えます。グリーン化を実現するには スクリーニング アルゴリズム、コードは上記に記載されています。

以上がJavaScript を使用してグリーン スクリーン アルゴリズムを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。