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);
| parameter | menggambarkan |
|---|---|
| imgData | Menentukan objek ImageData untuk ditempatkan kembali di kanvas. |
| X | Koordinat x pojok kiri atas objek ImageData, dalam piksel. |
| kamu | Koordinat y pojok kiri atas objek ImageData, dalam piksel. |
| dX | Opsional. Nilai horizontal (x), dalam piksel, tempat menempatkan gambar di kanvas. |
| dY | Opsional. Nilai horizontal (y), dalam piksel, tempat menempatkan gambar di kanvas. |
| dLebar | Opsional. Lebar yang digunakan untuk menggambar gambar di kanvas. |
| dTinggi | Opsional. Ketinggian gambar yang digambar di kanvas. |
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); ReferensiMemanipulasi video menggunakan kanvas
Manipulasi piksel dengan kanvas
Kanvas dan gambar dan piksel