Recorte de pantalla verde de video de operación de punto de píxel de lienzo

Este artículo presenta el recorte de la pantalla verde del video de la operación del punto de píxel del lienzo y lo comparte con todos. Los detalles son los siguientes:

uso:

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

La siguiente castaña simplemente implementa varios efectos de filtro simples. Aquí se hace referencia al algoritmo específico. Los estudiantes que hayan estudiado "Procesamiento de imágenes digitales" deberían tener una comprensión más profunda de esto.

manifestación

Esta castaña es puramente para fines de demostración. Si solo enfatiza el efecto y no le importan los datos, puede usar el atributo de filtro de CSS3 para hacerlo de manera eficiente y sencilla.

Parte del código

 importar imgUrl desde './component/sample.jpg'; exportar {datos () predeterminados {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 () {let data = this.frameData.data for (let i = 0; i < this.imgDataLength; i + = 4) { sea r = datos[i + 0], g = datos[i + 1], b = datos[i + 2]; datos[i + 0] = 255 - r; 1] = 255 - g; datos[i + 2] = 255 - b; } devolver this.frameData;},onCompute2 () {let data = this.frameData.data; imgDataLength; i += 4) { datos[i] = Math.abs(datos[i + 1] - datos[i + 2] + datos[i + 1] + datos[i]) * datos[i] / 256; datos[i + 1] = Math.abs(datos[i + 2] - datos[i + 1] + datos[i + 2] + datos[i]) * datos[i] / 256; datos[i + 2] = Math.abs(datos[i + 2] - datos[i + 1] + datos[i + 2] + datos[i]) * datos[i + 1] / 256; } return this.frameData;},...},mounted () { this.canvas = this.$refs['canvas']; this.canvas.getContext('2d'); recargar();}}

La semana pasada, fui con mis compañeros de clase al Mar de Bambú de Nanshan en el Lago Tianmu, Liyang. Me engañaron para que tomara una foto en el área escénica, y era esta:

Luego me criticaron en el círculo de amigos por recortar fotografías. De hecho, fue tomada mientras estaba parado frente a una pantalla verde :joy:.

La herramienta varita mágica en PS puede seleccionar y borrar todos los píxeles similares dentro de una cierta tolerancia en la imagen, lo que facilita recortar la imagen con un clic. La premisa es que el sujeto debe ser significativamente diferente del fondo, es decir, cuanto mayor sea la diferencia en los valores de píxeles, más fácil será recortar la imagen. Mejor será el efecto de la imagen.

Canvas puede hacer lo mismo y procesar cuadros de video. El principio es el mismo: simplemente establezca la transparencia del bloque de píxeles de la pantalla verde en cada cuadro de video en 0. Como esto -

manifestación

Parte del código

 importar videoUrl desde './component/video.ogv';importar imgUrl desde './component/sample.jpg';const TOLERANCE = 5;exportar {datos () predeterminados {return {videoUrl: videoUrl,imgUrl: imgUrl}}, métodos: {draw () {if (este.video.pausado || este.video.ended) { retorno; }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; i < len; i++) { let r = frameData.data[i * 4 + 0], g = frameData.data[i * 4 + 1], b = frameData.data[i * 4 + 2]; - 100 >= TOLERANCIA && g - 100 >= TOLERANCIA && b - 43 <= TOLERANCIA) { frameData.data[i * 4 + 3] = 0; } } return frameData;}},montado () {this.video = this.$refs['video']; this.canvas = this.$refs['canvas']; '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 }, falso);}}

Manipular vídeo usando lienzo

Manipulación de píxeles con lienzo.

Lienzo e imágenes y píxeles.