Potongan layar hijau video operasi titik piksel kanvas

Artikel ini memperkenalkan potongan layar hijau video dari operasi titik piksel kanvas dan membagikannya kepada semua orang. Detailnya adalah sebagai berikut:

penggunaan:

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

Kacang di bawah ini hanya mengimplementasikan beberapa efek filter sederhana. Algoritme spesifik direferensikan di sini. Siswa yang telah mempelajari "Pemrosesan Gambar Digital" harus memiliki pemahaman yang lebih dalam tentang hal ini.

demo

Kastanye ini murni untuk tujuan demonstrasi. Jika Anda hanya menekankan efek dan tidak peduli dengan data, Anda dapat menggunakan atribut filter CSS3 untuk melakukannya secara efisien dan mudah.

Bagian dari kode

 impor imgUrl dari './component/sample.jpg';ekspor default {data () {return {imgUrl: imgUrl}},metode: {onOperate1 () {this.ctx.putImageData(this.onCompute1(), 0, 0 );},onOperate2() {ini.ctx.putImageData(ini.onCompute2(), 0, 0);},...onCancel () {this.reload();},onCompute1 () {biarkan data = this.frameData.data; untuk (biarkan i = 0; i < this.imgDataLength; i + = 4) { misalkan r = data[i + 0], g = data[i + 1], b = data[i + 2]; data[i + 0] = 255 - r; 1] = 255 - g; data[i + 2] = 255 - b; } kembalikan this.frameData;},onCompute2 () {biarkan data = this.frameData.data; imgPanjang Data; i += 4) { data[i] = Matematika.abs(data[i + 1] - data[i + 2] + data[i + 1] + data[i]) * data[i] / 256; data[i + 1] = Matematika.abs(data[i + 2] - data[i + 1] + data[i + 2] + data[i]) * data[i] / 256; data[i + 2] = Matematika.abs(data[i + 2] - data[i + 1] + data[i + 2] + data[i]) * data[i + 1] / 256; } kembalikan this.frameData;},...},mounted () { this.canvas = this.$refs['canvas']; this.ctx = this.canvas.getContext('2d'); muat ulang();}}

Minggu lalu, saya pergi bersama teman-teman sekelas saya ke Laut Bambu Nanshan di Danau Tianmu, Liyang. Saya tertipu untuk mengambil foto di area pemandangan tersebut, dan inilah fotonya -

Kemudian saya dikritik di kalangan teman-teman karena memotong gambar. Faktanya, itu diambil sambil berdiri di depan layar hijau :joy:.

Alat tongkat ajaib di PS dapat memilih dan menghapus semua piksel serupa dalam toleransi tertentu pada gambar, sehingga memudahkan untuk memotong gambar dengan satu klik. Premisnya adalah subjek harus sangat berbeda dari latar belakang, yaitu, semakin besar perbedaan nilai piksel, semakin mudah untuk memotong gambar. Semakin baik efek gambarnya.

Canvas dapat melakukan hal yang sama dan dapat memproses frame video. Prinsipnya sama - cukup atur transparansi blok piksel layar hijau di setiap frame video ke 0. Seperti ini -

demo

Bagian dari kode

 impor videoUrl dari './component/video.ogv';impor imgUrl dari './component/sample.jpg';const TOLERANCE = 5;ekspor default {data () {return {videoUrl: videoUrl,imgUrl: imgUrl}}, metode: {draw () {if (ini.video.dijeda || ini.video.berakhir) { return; }ini.ctx.drawImage(ini.video, 0, 0, ini.lebar, ini.tinggi);ini.ctx.putImageData(ini.cutOut(), 0, 0);},cutOut () {biarkan frameData = this.ctx.getImageData(0, 0, this.width, this.height),len = frameData.data.length / 4 untuk (misalkan i = 0; i < len; i++) { misalkan r = frameData.data[i * 4 + 0], g = frameData.data[i * 4 + 1], b = frameData.data[i * 4 + 2]; - 100 >= TOLERANSI && g - 100 >= TOLERANSI && b - 43 <= TOLERANSI) { frameData.data[i * 4 + 3] = 0; } } kembalikan frameData;}},mount () {ini.video = ini.$refs['video']; ini.kanvas = ini.$refs['kanvas']; '2d'); ini.timer = null; ini.video.addEventListener('play', () => { ini.lebar = ini.video.videoWidth; ini.tinggi = ini.video.videoHeight; ini.timer && clearInterval(ini.timer); ini.timer = setInterval(() => { this.draw(); }, 50);

Memanipulasi video menggunakan kanvas

Manipulasi piksel dengan kanvas

Kanvas dan gambar dan piksel