Kesan khas berbilang pilihan gambar Douyin yang sangat popular boleh dilaksanakan dengan cepat menggunakan bahagian hadapan!

Artikel ini membawakan anda pengetahuan yang berkaitan tentang kesan khas gambar bahagian hadapan terutamanya memperkenalkan cara bahagian hadapan melaksanakan kesan khas berbilang pilihan yang telah menjadi sangat popular di Douyin baru-baru ini lihatlah bersama-sama saya harap Bantu mereka yang memerlukan.

Atas sebab keselamatan, Nuggets tidak menetapkan allow="microphone *;camera *" pada tag iframe , menyebabkan kamera gagal dibuka! Sila klik "Lihat Butiran" di sudut kanan atas untuk melihat! Atau klik pada pautan di bawah untuk melihat

//复制链接预览
https://code.juejin.cn/pen/7160886403805970445

Prakata

Terdapat 图片选择题 yang sangat popular di kalangan kesan khas Douyin baru-baru ini. Hari ini saya akan bercakap tentang cara melaksanakan bahagian hadapan. Saya akan membincangkannya di bawah. Hanya klik 如何判断左右摆头.

Seni Bina dan Konsep

Idea pelaksanaan keseluruhan abstraksi adalah seperti berikut

MediaPipe Face Mesh ialah penyelesaian anggaran masa nyata 468 tanda tempat muka 3D walaupun pada peranti mudah alih. Ia menggunakan pembelajaran mesin (ML) untuk menyimpulkan permukaan muka 3D, hanya memerlukan input kamera dan tiada penderia kedalaman khusus. Penyelesaian itu memanfaatkan seni bina model yang ringan bersama-sama dengan pecutan GPU sepanjang perancangan untuk menyampaikan prestasi masa nyata kritikal untuk pengalaman masa nyata.

Memperkenalkan

import '@mediapipe/face_mesh';
import '@tensorflow/tfjs-core';
import '@tensorflow/tfjs-backend-webgl';
import * as faceLandmarksDetection from '@tensorflow-models/face-landmarks-detection';

untuk mencipta model muka

Memperkenalkan aliran tensor terlatih 人脸特征点检测模型 untuk meramalkan 486 titik ciri muka 3D dan membuat kesimpulan muka Anggaran geometri muka .

• maxFaces Lalai ialah 1. Bilangan maksimum muka yang akan dikesan oleh model. Bilangan muka yang dikembalikan boleh kurang daripada maksimum (contohnya, apabila tiada muka dalam input). Adalah amat disyorkan untuk menetapkan nilai ini kepada bilangan muka maksimum yang dijangkakan, jika tidak, model akan terus mencari wajah yang hilang, yang mungkin memperlahankan prestasi.
• refineLandmarks Lalai kepada palsu. Jika ditetapkan kepada benar, menapis koordinat tanda tempat di sekeliling mata dan bibir serta mengeluarkan tanda tempat tambahan di sekitar iris. (Saya boleh tetapkan false di sini kerana kami tidak menggunakan koordinat mata)
• solutionPath Laluan ke tempat letak fail binari dan model am. (Adalah amat disyorkan untuk meletakkan model ke dalam storan objek domestik. Muatan pertama boleh menjimatkan banyak masa. Saiznya lebih kurang 10M)

async createDetector(){
    const model = faceLandmarksDetection.SupportedModels.MediaPipeFaceMesh;
    const detectorConfig = {
        maxFaces:1, //检测到的最大面部数量
        refineLandmarks:false, //可以完善眼睛和嘴唇周围的地标坐标，并在虹膜周围输出其他地标
        runtime: 'mediapipe',
        solutionPath: 'https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh', //WASM二进制文件和模型文件所在的路径
    };
    this.detector = await faceLandmarksDetection.createDetector(model, detectorConfig);
}

Pengecaman muka

Senarai wajah yang dikembalikan mengandungi wajah yang dikesan untuk setiap wajah dalam imej. Jika model tidak dapat mengesan sebarang wajah, senarai itu akan kosong. Untuk setiap muka, ia mengandungi kotak sempadan muka yang dikesan dan pelbagai titik kunci. MediaPipeFaceMesh mengembalikan 468 titik utama. Setiap titik kunci mengandungi x dan y, serta nama.

Kini anda boleh menggunakan pengesan untuk mengesan wajah. Kaedah estimateFaces menerima imej dan video dalam pelbagai format, termasuk: HTMLVideoElement, HTMLImageElement, HTMLCanvasElement dan Tensor3D.

• flipHorizontal Pilihan. Lalai adalah palsu. Apabila data imej datang daripada kamera, hasilnya mesti diterbalikkan secara mendatar.

async renderPrediction() {
    var video = this.$refs['video'];
    var canvas = this.$refs['canvas'];
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
    const Faces = await this.detector.estimateFaces(video, {
        flipHorizontal:false, //镜像
    });
    if (Faces.length > 0) {
        this.log(`检测到人脸`);
    } else {
        this.log(`没有检测到人脸`);
    }
}

Kotak ini mewakili kotak sempadan muka dalam ruang piksel imej, xMin, xMax mewakili sempadan x, yMin, yMax mewakili y- sempadan, lebar, tinggi mewakili saiz kotak sempadan. Untuk titik kekunci, x dan y mewakili lokasi titik kekunci sebenar dalam ruang piksel imej. z mewakili kedalaman di mana pusat kepala adalah asal Semakin kecil nilainya, semakin dekat titik kunci dengan kamera. Saiz Z menggunakan kira-kira skala yang sama dengan x. Nama ini menyediakan label untuk beberapa perkara penting, seperti "bibir", "mata kiri", dsb. Ambil perhatian bahawa tidak setiap titik kunci mempunyai label.

Cara menilai

Cari dua titik pada muka

Mata pertama额头中心位置Mata kedua下巴中心位置

const place1 = (face.keypoints || []).find((e,i)=>i===10); //额头位置
const place2 = (face.keypoints || []).find((e,i)=>i===152); //下巴位置
/*
              x1,y1
                |
                |
                |
  x2,y2  -------|------- x4,y4
              x3,y3
 */
 const [x1,y1,x2,y2,x3,y3,x4,y4] = [
      place1.x,place1.y,
      0,place2.y,
      place2.x,place2.y,
      this.canvas.width, place2.y
 ];

Dikira daripada canvas.width 额头中心位置 dan 下巴中心位置x1,y1,x2,y2,x3,y3,x4,y4

getAngle({ x: x1, y: y1 }, { x: x2, y: y2 }){
    const dot = x1 * x2 + y1 * y2
    const det = x1 * y2 - y1 * x2
    const angle = Math.atan2(det, dot) / Math.PI * 180
    return Math.round(angle + 360) % 360
}
const angle = this.getAngle({
        x: x1 - x3,
        y: y1 - y3,
    }, {
        x: x2 - x3,
        y: y2 - y3,
    });
console.log('角度',angle)

通过获取角度，通过角度的大小来判断左右摆头。

推荐：《web前端开发视频教程》

Atas ialah kandungan terperinci Kesan khas berbilang pilihan gambar Douyin yang sangat popular boleh dilaksanakan dengan cepat menggunakan bahagian hadapan!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!