캔버스 픽셀 포인트 작업 비디오 녹색 화면 컷아웃

이 글은 주로 캔버스 픽셀 포인트 동작과 영상 그린 스크린 컷아웃 관련 정보를 소개하고 있습니다. 편집자께서 꽤 괜찮다고 생각하셔서 지금 공유하고 참고용으로 올려드리겠습니다. 편집자를 따라가서 살펴볼까요

이 글에서는 캔버스 픽셀 포인트 작업의 영상 그린 스크린 컷아웃을 소개하고, 자세한 내용을 여러분과 공유합니다.

사용법:

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

다음 밤나무는 간단합니다. 몇 가지 간단한 구현 필터 효과, 특정 알고리즘은 여기에서 참조됩니다. "디지털 이미지 처리"를 공부한 학생들은 이에 대해 더 깊이 이해해야 합니다.

demo

이 밤은 순전히 시연용입니다. 데이터에 신경쓰지 않고 효과만 강조한다면 CSS3의 필터 속성을 사용하면 효율적이고 쉽게 할 수 있습니다.

코드의 일부

import imgUrl from './component/sample.jpg';

export default {
	data () {
		return {
			imgUrl: imgUrl
		}
	},

	methods: {
		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) {
	          	let r = data[i + 0],
	          		g = data[i + 1],
	          		b = data[i + 2];
	          	
          		data[i + 0] = 255 - r;
          		data[i + 1] = 255 - g;
          		data[i + 2] = 255 - b;
	        }

	        return this.frameData;
		},

		onCompute2 () {
			let data = this.frameData.data;

	        for (let i = 0; i < this.imgDataLength; i += 4) {
	          	data[i] = Math.abs(data[i + 1] - data[i + 2] + data[i + 1] + data[i]) * data[i] / 256;  
            	data[i + 1] = Math.abs(data[i + 2] - data[i + 1] + data[i + 2] + data[i]) * data[i] / 256;  
            	data[i + 2] = Math.abs(data[i + 2] - data[i + 1] + data[i + 2] + data[i]) * data[i + 1] / 256;
	        }

	        return this.frameData;
		},

		...
	},

	mounted () {
        this.canvas = this.$refs[&#39;canvas&#39;];
        this.ctx = this.canvas.getContext(&#39;2d&#39;);

        this.reload();
	}
}

지난주에 반 친구들과 함께 린양 천목호 남산 죽해에 갔었는데 속아서 명승지에서 사진을 찍었는데 이게 바로 ---

그때 나는 불평을 했고 친구들 사이에서 단절되었습니다. 사실 이 사진은 녹색 화면 앞에 서서 찍은 것입니다:joy:.

PS의 마술 지팡이 도구는 이미지의 특정 허용 범위 내에서 유사한 픽셀을 모두 선택하고 지울 수 있으므로 한 번의 클릭으로 쉽게 "잘라내기"가 가능합니다. 전제는 피사체가 배경과 크게 달라야 한다는 것입니다. 즉, 픽셀값의 차이가 클수록 컷아웃 효과가 좋아집니다.

캔버스도 동일한 작업을 수행할 수 있으며 비디오 프레임을 처리할 수 있습니다. 원리는 동일합니다. 각 비디오 프레임의 녹색 화면 픽셀 블록의 투명도를 0으로 설정하면 됩니다. 이렇게 -

demo

코드의 일부

import videoUrl from './component/video.ogv';
import imgUrl from './component/sample.jpg';

const TOLERANCE = 5;
export default {
	data () {
		return {
			videoUrl: videoUrl,
			imgUrl: imgUrl
		}
	},

	methods: {
		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 = frameData.data[i * 4 + 0],
	          		g = frameData.data[i * 4 + 1],
	          		b = frameData.data[i * 4 + 2];
	          	if (r - 100 >= TOLERANCE 
	          	 && g - 100 >= TOLERANCE 
	          	 && b - 43 <= TOLERANCE) {
		            frameData.data[i * 4 + 3] = 0;
	          	}
	        }
	        return frameData;
		}
	},

	mounted () {
		this.video = this.$refs[&#39;video&#39;];
        this.canvas = this.$refs[&#39;canvas&#39;];
        this.ctx = this.canvas.getContext(&#39;2d&#39;);
        this.timer = null;

        this.video.addEventListener(&#39;play&#39;, () => {
            this.width = this.video.videoWidth;
            this.height = this.video.videoHeight;

            this.timer && clearInterval(this.timer);
            this.timer = setInterval(() => {
            	this.draw();
            }, 50);
        }, false);
	}
}

References

캔버스를 사용하여 비디오 조작

기사의 전체 내용이 모든 사람의 학습에 도움이 되기를 바랍니다. 더 많은 관련 튜토리얼을 보려면

Html5 비디오 튜토리얼

을 방문하세요!

관련 권장 사항:

php 공공 복지 교육 비디오 튜토리얼

HTML5 그래픽 튜토리얼

HTML5 온라인 매뉴얼

위 내용은 캔버스 픽셀 포인트 작업 비디오 녹색 화면 컷아웃의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!