캔버스 픽셀 포인트 작업 비디오 녹색 화면 컷아웃
- 青灯夜游앞으로
- 2018-10-09 15:18:403772검색
이 글은 주로 캔버스 픽셀 포인트 동작과 영상 그린 스크린 컷아웃 관련 정보를 소개하고 있습니다. 편집자께서 꽤 괜찮다고 생각하셔서 지금 공유하고 참고용으로 올려드리겠습니다. 편집자를 따라가서 살펴볼까요
이 글에서는 캔버스 픽셀 포인트 작업의 영상 그린 스크린 컷아웃을 소개하고, 자세한 내용을 여러분과 공유합니다.
사용법:
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['canvas'];
this.ctx = this.canvas.getContext('2d');
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['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);
}, false);
}
}References
캔버스를 사용하여 비디오 조작
기사의 전체 내용이 모든 사람의 학습에 도움이 되기를 바랍니다. 더 많은 관련 튜토리얼을 보려면
Html5 비디오 튜토리얼을 방문하세요!
php 공공 복지 교육 비디오 튜토리얼위 내용은 캔버스 픽셀 포인트 작업 비디오 녹색 화면 컷아웃의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!