站長資訊網(wǎng)
本篇文章給大家?guī)砹岁P(guān)于前端圖片特效的相關(guān)知識，其中主要給大家介紹前端如何實現(xiàn)一個最近抖音很火的圖片選擇題特效，非常全面詳細，下面一起來看一下，希望對需要的朋友有所幫助。
掘金由于安全原因沒有在 iframe標(biāo)簽上設(shè)置allow="microphone *;camera *"導(dǎo)致攝像頭打開失敗！請點擊右上角“查看詳情”查看！或點擊下方鏈接查看
//復(fù)制鏈接預(yù)覽 https://code.juejin.cn/pen/7160886403805970445
前言
最近抖音特效中有個圖片選擇題特別火，今天就來講一下前端如何實現(xiàn)，下面我主要講一下如何判斷左右擺頭。
架構(gòu)和概念
抽象整體的實現(xiàn)思路如下
MediaPipe Face Mesh是一個解決方案，即使在移動設(shè)備上也能實時估計468個3D面部地標(biāo)。它使用機器學(xué)習(xí)（ML）來推斷3D面部表面，只需要一個攝像頭輸入，而無需專用的深度傳感器。該解決方案利用輕量級模型架構(gòu)以及整個管道中的GPU加速，為實時體驗提供了至關(guān)重要的實時性能。
引入
import '@mediapipe/face_mesh'; import '@tensorflow/tfjs-core'; import '@tensorflow/tfjs-backend-webgl'; import * as faceLandmarksDetection from '@tensorflow-models/face-landmarks-detection';
創(chuàng)建人臉模型
引入tensorflow訓(xùn)練好的人臉特征點檢測模型，預(yù)測 486 個 3D 人臉特征點，推斷出人臉的近似面部幾何圖形。
maxFaces默認為1。模型將檢測到的最大人臉數(shù)量。返回的面孔數(shù)量可以小于最大值（例如，當(dāng)輸入中沒有人臉時）。強烈建議將此值設(shè)置為預(yù)期的最大人臉數(shù)量，否則模型將繼續(xù)搜索缺失的面孔，這可能會減慢性能。refineLandmarks默認為false。如果設(shè)置為真，則細化眼睛和嘴唇周圍的地標(biāo)坐標(biāo)，并在虹膜周圍輸出其他地標(biāo)。（這里我可以設(shè)置false，因為我們沒有用到眼部坐標(biāo)）solutionPath通往am二進制文件和模型文件所在位置的路徑。(強烈建議將模型放到國內(nèi)的對象存儲里面，首次加載可以節(jié)省大量時間，大小大概10M)
async createDetector(){ const model = faceLandmarksDetection.SupportedModels.MediaPipeFaceMesh; const detectorConfig = { maxFaces:1, //檢測到的最大面部數(shù)量 refineLandmarks:false, //可以完善眼睛和嘴唇周圍的地標(biāo)坐標(biāo)，并在虹膜周圍輸出其他地標(biāo) runtime: 'mediapipe', solutionPath: 'https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh', //WASM二進制文件和模型文件所在的路徑 }; this.detector = await faceLandmarksDetection.createDetector(model, detectorConfig); }
人臉識別
返回的面孔列表包含圖像中每個面孔的檢測面。如果模型無法檢測到任何面孔，列表將是空的。 對于每個面，它包含一個檢測到的面孔的邊界框，以及一個關(guān)鍵點數(shù)組。MediaPipeFaceMesh返回468個關(guān)鍵點。每個關(guān)鍵點都包含x和y，以及一個名稱。
現(xiàn)在，您可以使用探測器來檢測人臉。estimateFaces方法接受多種格式的圖像和視頻，包括：
HTMLVideoElement、HTMLImageElement、HTMLCanvasElement和Tensor3D。
flipHorizontal可選。默認為false。當(dāng)圖像數(shù)據(jù)來自相機時，結(jié)果必須水平翻轉(zhuǎn)。
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(`沒有檢測到人臉`); } }
該框表示圖像像素空間中面部的邊界框，xMin、xMax表示x-bounds、yMin、yMax表示y-bounds，寬度、高度表示邊界框的尺寸。 對于關(guān)鍵點，x和y表示圖像像素空間中的實際關(guān)鍵點位置。z表示頭部中心為原點的深度，值越小，鍵點離相機越近。Z的大小使用與x大致相同的比例。 這個名字為一些關(guān)鍵點提供了一個標(biāo)簽，例如“嘴唇”、“左眼”等。請注意，并非每個關(guān)鍵點都有標(biāo)簽。
如何判斷
找到人臉上的兩個兩個點
第一個點 額頭中心位置第二個點 下巴中心位置
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 ];
通過canvas.width 額頭中心位置和下巴中心位置計算出 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前端開發(fā)視頻教程》
