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

이 기사에서는 캔버스 픽셀 포인트 작업의 비디오 그린 스크린 컷아웃을 소개하고 자세한 내용을 모두와 공유합니다.

용법:

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

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

데모

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

코드의 일부

 import imgUrl from './comComponent/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) { r = 데이터[i + 0], g = 데이터[i + 1], b = 데이터[i + 0] = 255 - r; 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) { 데이터[i] = Math.abs(data[i + 1] - 데이터[i + 2] + 데이터[i + 1] + 데이터[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.canvas.getContext('2d'); 다시 로드();}}

지난주에 저는 반 친구들과 함께 리양 천무호에 있는 난산 죽해에 갔습니다. 경치가 좋은 곳에서 속아서 사진을 찍게 되었어요.

그러다가 친구들 사이에서 사진을 잘라냈다는 이유로 비난을 받았습니다. 사실 이 사진은 녹색 화면 앞에 서서 찍은 것입니다:joy:.

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

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

데모

코드의 일부

 './comComponent/video.ogv'에서 videoUrl 가져오기; './comComponent/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 () {letframeData = 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 >= TOLERANCE && g - 100 >= TOLERANCE && b - 43 <= TOLERANCE) { 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);}}

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

캔버스를 사용한 픽셀 조작

캔버스와 이미지, 픽셀