이 기사에서는 캔버스 픽셀 포인트 작업의 비디오 그린 스크린 컷아웃을 소개하고 자세한 내용을 모두와 공유합니다.
용법:
context.putImageData(imgData, x, y, dX, dY, dWidth, dHeight);
| 매개변수 | 설명하다 |
|---|---|
| imgData | 캔버스에 다시 배치할 ImageData 개체를 지정합니다. |
| 엑스 | ImageData 개체의 왼쪽 위 모서리에 대한 x 좌표(픽셀)입니다. |
| 와이 | ImageData 객체의 왼쪽 위 모서리에 대한 y좌표(픽셀 단위)입니다. |
| dX | 선택 과목. 캔버스에 이미지를 배치할 가로 값(x)(픽셀 단위)입니다. |
| dY | 선택 과목. 캔버스에 이미지를 배치할 가로 값(y)(픽셀 단위)입니다. |
| d폭 | 선택 과목. 캔버스에 이미지를 그리는 데 사용되는 너비입니다. |
| d 높이 | 선택 과목. 캔버스에 이미지가 그려지는 높이입니다. |
아래의 밤은 단순히 몇 가지 간단한 필터 효과를 구현합니다. 여기서는 특정 알고리즘을 참조합니다. "디지털 이미지 처리"를 공부한 학생들은 이에 대해 더 깊이 이해해야 합니다.
데모
이 밤나무는 순전히 시연용입니다. 효과만 강조하고 데이터에는 신경 쓰지 않는다면 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);}} 참고자료캔버스를 사용하여 비디오 조작
캔버스를 사용한 픽셀 조작
캔버스와 이미지, 픽셀