当前位置：首页 > JavaScript

js实现微笑评分

2026-02-03 06:16:42JavaScript

微笑评分实现思路

微笑评分通常基于面部识别技术，通过检测人脸关键点（如嘴角、眼睛）的位移或角度变化来评估微笑程度。以下是使用JavaScript及相关库实现的方案：

使用Face-api.js库实现

Face-api.js是基于TensorFlow.js的轻量级人脸识别库，适合浏览器端实时检测。

安装依赖：

npm install face-api.js

核心代码示例：

// 加载模型
async function loadModels() {
  await faceapi.nets.tinyFaceDetector.loadFromUri('/models');
  await faceapi.nets.faceLandmark68Net.loadFromUri('/models');
}

// 检测微笑
async function detectSmile(videoElement) {
  const detections = await faceapi.detectAllFaces(
    videoElement, 
    new faceapi.TinyFaceDetectorOptions()
  ).withFaceLandmarks();

  if (detections.length > 0) {
    const landmarks = detections[0].landmarks;
    const jaw = landmarks.getJawOutline();
    const mouth = landmarks.getMouth();

    // 计算嘴角上扬角度
    const leftMouthCorner = mouth[0];
    const rightMouthCorner = mouth[6];
    const angle = calculateAngle(leftMouthCorner, rightMouthCorner);

    // 评分转换（示例：0-100分）
    return Math.min(100, Math.max(0, angle * 10));
  }
  return 0;
}

// 辅助函数：计算两点角度
function calculateAngle(p1, p2) {
  return Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
}

纯前端实现方案（无库）

若需轻量级方案，可通过Canvas分析嘴部区域像素变化：

function analyzeSmile(video, canvas) {
  const ctx = canvas.getContext('2d');
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

  // 获取嘴部ROI区域（需预先标定位置）
  const mouthData = ctx.getImageData(
    canvas.width * 0.3, 
    canvas.height * 0.6,
    canvas.width * 0.4,
    canvas.height * 0.2
  ).data;

  // 计算像素亮度变化（微笑时嘴角区域变暗）
  let darkPixels = 0;
  for (let i = 0; i < mouthData.length; i += 4) {
    const avg = (mouthData[i] + mouthData[i+1] + mouthData[i+2]) / 3;
    if (avg < 100) darkPixels++;
  }

  return (darkPixels / (mouthData.length / 4)) * 100;
}

优化建议

阈值校准：通过收集样本数据调整评分公式，例如：

// 动态阈值调整
const baseAngle = 5; // 中性表情角度
const score = (currentAngle - baseAngle) * sensitivity;

多维度评估：结合眼睛眯起程度、脸颊隆起等特征：

const eyeAspectRatio = calculateEyeAspect(landmarks);
const cheekVolume = calculateCheekVolume(landmarks);

平滑处理：使用移动平均避免分数跳动：

const scores = [];
function getSmoothedScore(newScore) {
  scores.push(newScore);
  if (scores.length > 5) scores.shift();
  return scores.reduce((a,b) => a+b) / scores.length;
}