この記事では、キャンバス ピクセル ポイント操作のビデオ グリーン スクリーン カットアウトを紹介し、それを皆さんと共有します。詳細は次のとおりです。
使用法:
context.putImageData(imgData, x, y, dX, dY, dWidth, dHeight);
| パラメータ | 説明する |
|---|---|
| 画像データ | キャンバスに戻す ImageData オブジェクトを指定します。 |
| × | ImageData オブジェクトの左上隅の x 座標 (ピクセル単位)。 |
| y | ImageData オブジェクトの左上隅の y 座標 (ピクセル単位)。 |
| dX | オプション。キャンバス上の画像を配置する水平方向の値 (x) (ピクセル単位)。 |
| 日 | オプション。キャンバス上の画像を配置する水平方向の値 (y) (ピクセル単位)。 |
| d幅 | オプション。キャンバス上に画像を描画するために使用される幅。 |
| d高さ | オプション。キャンバス上に画像が描画される高さ。 |
以下のチェストナットは、いくつかの単純なフィルター効果を実装しているだけです。具体的なアルゴリズムは、「デジタル画像処理」を学習したことのある学生であれば、より深く理解できるはずです。
デモ
この栗は純粋にデモンストレーションを目的としており、データを気にせずに効果だけを強調する場合は、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);}}参考文献キャンバスを使用したビデオの操作
キャンバスを使用したピクセル操作
キャンバスと画像とピクセル