Leinwand-Pixelpunkt-Bedienungsvideo-Greenscreen-Ausschnitt

In diesem Artikel wird der Video-Greenscreen-Ausschnitt der Leinwand-Pixelpunktoperation vorgestellt und mit allen geteilt. Die Details lauten wie folgt:

Verwendung:

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

Die Kastanie unten implementiert einfach mehrere einfache Filtereffekte. Auf den spezifischen Algorithmus wird hier verwiesen. Studierende, die „Digitale Bildverarbeitung“ studiert haben, sollten ein tieferes Verständnis dafür haben.

Demo

Diese Kastanie dient lediglich Demonstrationszwecken. Wenn Sie nur den Effekt betonen und sich nicht um die Daten kümmern, können Sie dies effizient und einfach mit dem Filterattribut von CSS3 tun.

Teil des Codes

 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] = 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) { 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']; neu laden();}}

Letzte Woche ging ich mit meinen Klassenkameraden zum Nanshan-Bambusmeer im Tianmu-See in Liyang. Ich wurde dazu verleitet, in der malerischen Gegend ein Foto zu machen, und es war dieses:

Dann wurde ich im Freundeskreis für das Ausschneiden von Bildern kritisiert. Tatsächlich wurde es aufgenommen, während man vor einem Greenscreen stand :joy:.

Das Zauberstab-Werkzeug in PS kann alle ähnlichen Pixel innerhalb einer bestimmten Toleranz im Bild auswählen und löschen, sodass das Bild einfach mit einem Klick ausgeschnitten werden kann. Voraussetzung ist, dass sich das Motiv deutlich vom Hintergrund unterscheiden muss. Je größer der Unterschied in den Pixelwerten ist, desto einfacher ist das Ausschneiden des Bildes. Je besser der Bildeffekt.

Canvas kann das Gleiche tun und Videobilder verarbeiten. Das Prinzip ist dasselbe – setzen Sie einfach die Transparenz des Greenscreen-Pixelblocks in jedem Videobild auf 0. So was -

Demo

Teil des Codes

 videoUrl aus './component/video.ogv' importieren; imgUrl aus './component/sample.jpg' importieren;const TOLERANCE = 5;standardmäßig exportieren {data () {return {videoUrl: videoUrl,imgUrl: imgUrl}}, Methoden: {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]; - 100 >= TOLERANZ && g - 100 >= TOLERANZ && b - 43 <= TOLERANZ) { frameData.data[i * 4 + 3] = 0; } } return frameData;}},mount () {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);}}

Bearbeiten von Videos mithilfe von Canvas

Pixelmanipulation mit Leinwand

Leinwand und Bilder und Pixel