juzi/h5

1'me 在线肌肤测试 H5

拍摄正面与左右侧面照片,调用 Face++ 皮肤分析(高阶版) 真实检测,即时生成肌肤状态分析与护理建议的移动端 H5。

• 前端:原生 HTML/CSS/JS,零依赖、零构建
• 后端:server.js(Node ≥ 18,零依赖)静态托管 + Face++ API 中转,api_secret 只存在服务端

目录结构

h5/
├── index.html          页面结构(启动 / 档案 / 拍照 / 报告 + 弹层)
├── server.js           后端:静态托管 + POST /api/skin-analyze(Face++ 中转)
├── css/style.css       全部样式(375px 基准)
├── js/app.js           全部交互(屏幕切换、肤质轮播、实时相机、结果映射)
├── assets/
│   ├── favicon.svg     站点图标
│   ├── img/            背景图、肤质插画、拍照底图、报告检测/产品图
│   └── svg/            品牌 Logo 与控件图标
└── preview/            开发期整页截图(仅存档,部署时可整目录剔除)

../apikey.bash          Face++ 密钥(export SKIN_API_KEY=... / SKIN_API_SECRET=...,已 .gitignore)

密钥配置

二选一:

1. 环境变量:export SKIN_API_KEY=xxx SKIN_API_SECRET=xxx 后启动 server.js
2. 密钥文件:项目根目录放 apikey.bash(内容为 export SKIN_API_KEY=... 等,server.js 会自动解析)

密钥文件已被 .gitignore 排除,严禁提交到版本库。

本地运行

cd h5
node server.js              # 默认 8080,可用 PORT=xxx 修改
# 打开 http://127.0.0.1:8080

调试:http://127.0.0.1:8080/?mock=1 使用内置样本数据跳过真实检测(离线/自动化验证用)。

检测流程与数据映射

1. 三连拍(正面/右脸/左脸):getUserMedia 实时取景,不支持/被拒时自动降级调起系统相机
2. 仅正面照送检(Face++ 高阶版只接受正脸,yaw>45° 会报错)
3. 照片压缩到最长边 1280 JPEG 后 POST /api/skin-analyze,服务端转发 Face++ skinanalyze_advanced
4. 映射层(mapSkinResult):设计稿的 紧塑力/活力感/稳定力/综合评分 由真实维度合成——
   • 紧塑力 ← 法令纹(+严重度)、眼袋(+严重度)
   • 活力感 ← 黑眼圈、眼部细纹、鱼尾纹、抬头纹、眉间纹
   • 稳定力 ← 敏感泛红(面积/强度)、痘痘、闭口、毛孔、黑头
   • 肌肤年龄 = Face++ skin_age 真实值;综合评分 = 三维加权(0.35/0.33/0.32)×10
   • 具体描述文案按检出项动态生成;报告第一/二张检测图使用用户实拍照片
5. 检测失败(无人脸/距离远/网络等)按错误码给出友好提示并退回档案页

部署

需要 Node ≥ 18 运行 server.js(负责静态与 API 中转),不能用纯静态托管(密钥不能进前端)。

PORT=8080 node server.js    # 建议 pm2 / systemd 常驻

nginx 反代示例(静态与 API 都交给 server.js,nginx 只做 HTTPS 终结):

server {
    listen 443 ssl;
    server_name example.com;
    ssl_certificate     /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
    location / {
        proxy_pass http://127.0.0.1:8080;
        proxy_set_header Host $host;
        client_max_body_size 12m;   # 与 server.js 请求上限一致
    }
}

HTTPS 必需:getUserMedia 相机权限仅在安全上下文可用(localhost 除外)。正式域名必须上 HTTPS,否则前端自动降级为系统相机拍照。

已知占位清单

• 报告页「活力感 / 稳定力」两个 Tab 为占位文案("以实际检测报告为准")。
• 「相关隐私协议」点击弹出的是占位说明层,协议全文待法务提供后接入。
• 产品图(prod-1.jpg)为设计稿素材;检测图已替换为用户实拍。
• 相册、切换镜头、「了解更多」为开发中占位(Toast 提示)。
• 护理建议为设计稿静态文案,未按检测结果个性化。

技术说明

• 尺寸换算:设计稿 1080px 基准 ÷ 2.88 = 375px 落地基准。
• 图片性能:首屏背景 preload;首屏外 loading="lazy"。
• 快门防连点/流程令牌(camSeq)防竞态;拍照页 15% 压暗遮罩保证白字可读。