Recorte de tela verde de vídeo de operação de ponto de pixel de tela

Este artigo apresenta o recorte da tela verde do vídeo da operação do ponto de pixel da tela e o compartilha com todos. Os detalhes são os seguintes:

uso:

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

A castanha abaixo simplesmente implementa vários efeitos de filtro simples. O algoritmo específico é mencionado aqui. Os alunos que estudaram "Processamento de imagem digital" devem ter uma compreensão mais profunda disso.

demonstração

Esta castanha é apenas para fins de demonstração. Se você apenas enfatiza o efeito e não se importa com os dados, pode usar o atributo filter do CSS3 para fazer isso de maneira fácil e eficiente.

Parte do código

 importar imgUrl de './component/sample.jpg'; exportar padrão {data () {return {imgUrl: imgUrl}}, métodos: {onOperate1 () {this.ctx.putImageData (this.onCompute1(), 0, 0 );},onOperate2 () {this.ctx.putImageData(this.onCompute2(), 0, 0);},...onCancel () {this.reload();},onCompute1 () {deixe data = this.frameData.data; for (deixe i = 0; i < this.imgDataLength; i + = 4) { seja r = dados[i + 0], g = dados[i + 1], b = dados[i + 2]; 1] = 255 - g; dados[i + 2] = 255 - b } return this.frameData;},onCompute2 () {let data = this.frameData.data; imgDataLength; i += 4) { dados[i] = Math.abs(dados[i + 1] - dados[i + 2] + dados[i + 1] + dados[i]) * dados[i] / 256; dados[i + 1] = Math.abs(dados[i + 2] - dados[i + 1] + dados[i + 2] + dados[i]) * dados[i] / 256; dados[i + 2] = Math.abs(dados[i + 2] - dados[i + 1] + dados[i + 2] + dados[i]) * dados[i + 1] / 256; } return this.frameData;},...},mounted () { this.canvas = this.$refs['canvas']; recarregar();}}

Na semana passada, fui com meus colegas ao Nanshan Bamboo Sea, no Lago Tianmu, Liyang, e fui levado a tirar uma foto na área cênica, e foi esta -.

Aí fui criticado no círculo de amigos por recortar fotos. Na verdade, ela foi tirada em frente a uma tela verde :joy:.

A ferramenta varinha mágica no PS pode selecionar e limpar todos os pixels semelhantes dentro de uma certa tolerância na imagem, facilitando o recorte da imagem com um clique. A premissa é que o assunto deve ser significativamente diferente do fundo, ou seja, quanto maior a diferença nos valores dos pixels, mais fácil será recortar a imagem. Melhor será o efeito da imagem.

O Canvas pode fazer o mesmo e processar quadros de vídeo. O princípio é o mesmo - basta definir a transparência do bloco de pixels da tela verde em cada quadro de vídeo como 0. Assim -

demonstração

Parte do código

 importar videoUrl de './component/video.ogv';importar imgUrl de './component/sample.jpg';const TOLERANCE = 5;exportar padrão {data () {return {videoUrl: videoUrl,imgUrl: imgUrl}}, métodos: {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 () {deixe frameData = this.ctx.getImageData(0, 0, this.width, this.height),len = frameData.data.length / 4 para (seja i = 0; i < len; i++) { deixe r = frameData.data[i * 4 + 0], g = frameData.data[i * 4 + 1], b = frameData.data[i * 4 + 2]; - 100 >= TOLERÂNCIA && g - 100 >= TOLERÂNCIA && b - 43 <= TOLERÂNCIA) { frameData.data[i * 4 + 3] = 0; } } return frameData;}},mounted () {this.video = this.$refs['video']; '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);

Manipulando vídeo usando canvas

Manipulação de pixels com tela

Tela e imagens e pixels