キャンバスピクセルポイント操作ビデオグリーンスクリーンカットアウト

この記事では、キャンバス ピクセル ポイント操作のビデオ グリーン スクリーン カットアウトを紹介し、それを皆さんと共有します。詳細は次のとおりです。

使用法：

 context.putImageData(imgData, x, y, dX, dY, dWidth, dHeight); 

以下のチェストナットは、いくつかの単純なフィルター効果を実装しているだけです。具体的なアルゴリズムは、「デジタル画像処理」を学習したことのある学生であれば、より深く理解できるはずです。

デモ

この栗は純粋にデモンストレーションを目的としており、データを気にせずに効果だけを強調する場合は、CSS3 のフィルター属性を使用すると効率的かつ簡単に実行できます。

コードの一部

 imgUrl を './component/sample.jpg' からインポート;デフォルトのエクスポート {data () {return {imgUrl: imgUrl}}、メソッド: {onOperate1 () {this.ctx.putImageData(this.onCompute1(), 0, 0) );},onOperate2 () {this.ctx.putImageData(this.onCompute2(), 0, 0);},...onCancel () {this.reload();},onCompute1 () {let data = this.frameData.data; for (let i = 0; i < this.imgDataLength; i + = 4) { r = データ[i + 0]、g = データ[i + 1]、b = データ[i + 0] = 255 - データ[i + ]; 1] = 255 - g; data[i + 2] = 255 - b; } return this.frameData;},onCompute2 () {let data = this.frameData.data; (let i = 0; i < this. imgDataLength; i += 4) { data[i] = Math.abs(data[i + 1] - data[i + 2] + data[i + 1] + data[i]) * データ[i] / 256; データ[i + 1] = Math.abs(データ[i + 2] - データ[i + 1] + データ[i + 2] + データ[i]) * データ[i] / 256; データ[i + 2] = Math.abs(データ[i + 2] - データ[i + 1] + データ[i + 2] + データ[i]) * データ[i + 1] / 256; } return this.frameData;},...},mounted () { this.canvas = this.$refs['canvas']; this.ctx = this.canvas.getContext('2d');リロード();}}

先週、クラスメートと溥陽市天目湖の南山竹海に行きました。景勝地で騙されて写真を撮らせてもらいました。

その後、写真を切り取ったことで友人の輪の中で批判されました。実際、これはグリーン スクリーンの前に立って撮影されたものです:joy:。

PS の魔法の杖ツールは、写真内の類似したピクセルを一定の許容範囲内ですべて選択して消去できるため、被写体が背景と大きく異なることが前提となっており、ワンクリックで簡単に画像を切り出すことができます。ピクセル値の差が大きいほど、画像の切り出しが容易になり、画像効果が向上します。

Canvas も同じことができ、ビデオ フレームを処理できます。原理は同じです。各ビデオ フレームのグリーン スクリーン ピクセル ブロックの透明度を 0 に設定するだけです。このような -

デモ

コードの一部

 「./component/video.ogv」から videoUrl をインポート;「./component/sample.jpg」から imgUrl をインポート;const TOLERANCE = 5;デフォルトのエクスポート {data () {return {videoUrl: videoUrl,imgUrl: imgUrl}},メソッド: {draw () {if (this.video.paused || this.video.ended) { return; }this.ctx.drawImage(this.video, 0, 0, this.width, this.height);this.ctx.putImageData(this.cutOut(), 0, 0);},cutOut () {let FrameData = this.ctx.getImageData(0, 0, this.width, this.height),len = FrameData.data.length / 4 for (let i = 0; i < len; i++) { let r = フレームデータ.データ[i * 4 + 0], g = フレームデータ.データ[i * 4 + 1], b = フレームデータ.データ[i * 4 + 2]; - 100 >= 許容値 && g - 100 >= 許容値 && b - 43 <= 許容値) {frameData.data[i * 4 + 3] = 0; return FrameData;}},mounted () {this.video = this.$refs['video']; this.canvas = this.$refs['canvas']; this.ctx = this.canvas.getContext( '2d'); this.timer = null; this.video.addEventListener('play', () => { this.width = this.video.videoWidth; this.height = this.video.videoHeight; this.timer && clearInterval(this.timer); this.timer = setInterval(() => { this.draw(); }, 50);}}

キャンバスを使用したビデオの操作

キャンバスを使用したピクセル操作

キャンバスと画像とピクセル