Découpe d'écran vert vidéo d'opération de point de pixel de toile

Cet article présente la découpe vidéo de l'écran vert de l'opération de point de pixel du canevas et la partage avec tout le monde. Les détails sont les suivants :

usage:

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

Le châtaignier ci-dessous implémente simplement plusieurs effets de filtre simples. L'algorithme spécifique est référencé ici. Les étudiants qui ont étudié le « traitement d'image numérique » devraient en avoir une compréhension plus approfondie.

démo

Cette châtaigne est uniquement à des fins de démonstration. Si vous insistez uniquement sur l'effet et ne vous souciez pas des données, vous pouvez utiliser l'attribut filter de CSS3 pour le faire efficacement et facilement.

Une partie du code

 importer imgUrl depuis './component/sample.jpg'; exporter par défaut {data () {return {imgUrl: imgUrl}}, méthodes : {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) { soit r = données[i + 0], g = données[i + 1], b = données[i + 2] ; 1] = 255 - g; data[i + 2] = 255 - b; } return this.frameData;},onCompute2 () {let data = this.frameData.data; imgDataLength; i += 4) { data[i] = Math.abs(data[i + 1] - data[i + 2] + data[i + 1] + data[i]) * données[i] / 256 ; données[i + 1] = Math.abs(données[i + 2] - données[i + 1] + données[i + 2] + données[i]) * données[i] / 256 ; données[i + 2] = Math.abs(données[i + 2] - données[i + 1] + données[i + 2] + données[i]) * données[i + 1] / 256; } return this.frameData;},...},mounted () { this.canvas = this.$refs['canvas']; recharger();}}

La semaine dernière, je suis allé avec mes camarades de classe à la mer de bambous de Nanshan, dans le lac Tianmu, à Liyang. J'ai été amené à prendre une photo dans la zone pittoresque, et c'était celle-ci :

Ensuite, j'ai été critiqué dans le cercle d'amis pour avoir découpé des images. En fait, elle a été prise devant un écran vert :joy:.

L'outil baguette magique de PS peut sélectionner et effacer tous les pixels similaires dans une certaine tolérance dans l'image, ce qui facilite la découpe de l'image en un seul clic. Le principe est que le sujet doit être significativement différent de l'arrière-plan, c'est-à-dire. plus la différence entre les valeurs des pixels est grande, plus il est facile de découper l'image. Meilleur est l'effet d'image.

Canvas peut faire de même et traiter les images vidéo. Le principe est le même : il suffit de définir la transparence du bloc de pixels de l'écran vert dans chaque image vidéo sur 0. Comme ça -

démo

Une partie du code

 importer videoUrl depuis './component/video.ogv'; importer imgUrl depuis './component/sample.jpg'; const TOLERANCE = 5; exporter par défaut {data () {return {videoUrl: videoUrl, imgUrl: imgUrl}}, méthodes : {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] si (r - 100 >= TOLÉRANCE && g - 100 >= TOLÉRANCE && b - 43 <= TOLÉRANCE) { frameData.data[i * 4 + 3] = 0; } } return frameData;}},monté () {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 }, false);}}

Manipulation de vidéo à l'aide de Canvas

Manipulation des pixels avec toile

Toile, images et pixels