在微信小游戏中使用tensorflow的face-landmarks-detection

火星牛

已于 2025-03-24 13:42:04 修改

阅读量2.1k

点赞数 3

分类专栏：微信小游戏 Javascript 游戏文章标签： tensorflow 小程序人脸识别 javascript js

于 2021-06-21 18:03:07 首次发布

本文链接：https://blog.csdn.net/acrodelphi/article/details/116536721

版权

Javascript 同时被 3 个专栏收录

38 篇文章

订阅专栏

微信小游戏

11 篇文章

订阅专栏

游戏

9 篇文章

订阅专栏

本文介绍了如何在微信小程序中使用TensorFlow进行人脸识别，重点讲述了如何解决模型下载问题，包括从云端下载到本地缓存的过程，以及如何利用Mediapipe模型进行人脸检测和特征提取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这篇文章有讲如何在微信小程序中用tensorflow做人脸识别。

https://zhuanlan.zhihu.com/p/81636351

做人脸识别，先要检测到人脸，获取面部特征，然后去数据库比对。

先看如何做人脸检测，获取轮廓和面部特征。

@tensorflow-models/face-landmarks-detection - npm

这个包可以检测到人脸468个点。查看这个包的源码，发现要下载3个模型文件：

facemesh：https://tfhub.dev/mediapipe/tfjs-model/facemesh/1/default/1
iris：https://tfhub.dev/mediapipe/tfjs-model/iris/1/default/2
blazeface：https://tfhub.dev/tensorflow/tfjs-model/blazeface/1/default/1

很不幸，大概https://tfhub.dev被国内封锁了或者我们被封锁了，下载不了。

如果model = await tf_face.load();不传参数，会发现预设的模型加载url，是：

https://www.kaggle.com/models/tensorflow/blazeface/tfJs/default/1/model.json?tfjs-format=file&tfhub-redirect=true
https://www.kaggle.com/models/mediapipe/facemesh/tfJs/default/1/model.json?tfjs-format=file&tfhub-redirect=true
https://www.kaggle.com/models/mediapipe/iris/tfJs/default/2/model.json?tfjs-format=file&tfhub-redirect=true

以上资源还可以用。另外，找到中国区的这个网站，也有这些资源：https://hub.tensorflow.google.cn/s?deployment-format=tfjs，分别去下载下来：

因为微信小程序不能从本地加载文件，所以必须解压，找个服务器传上去。可以开通“云开发”-“存储”或“云开发”-“静态网站”，把文件传上去。

const tf_face=require('@tensorflow-models/face-landmarks-detection');
let canvas_camera,ctx_camera;
async function main() {
  console.log('load....');
  console.log(tf_face.SupportedPackages.mediapipeFacemesh);
  // Load the MediaPipe Facemesh package.
  const model = await tf_face.load(
    tf_face.SupportedPackages.mediapipeFacemesh,
    {
      //detectorModelUrl:'https://tfhub.dev/mediapipe/tfjs-model/facemesh/1/default/1',
      detectorModelUrl:'https://???.tcloudbaseapp.com/model/facemesh/model.json',
      //irisModelUrl:'https://tfhub.dev/mediapipe/tfjs-model/iris/1/default/2',
      irisModelUrl:'https://???.tcloudbaseapp.com/model/iris/model.json',
      //modelUrl:'https://tfhub.dev/tensorflow/tfjs-model/blazeface/1/default/1'
      modelUrl:'https://???.tcloudbaseapp.com/model/blazeface/model.json'
    }
    );
  console.log('aa');
  canvas_camera=wx.createCanvas();
  canvas_camera.width=300;
  canvas_camera.height=400;
  ctx_camera=canvas_camera.getContext('2d');
  ctx_camera.drawImage(wx.tmGlobal.imgs['wxh'],
    0,0,canvas_camera.width,canvas_camera.height);
  // Pass in a video stream (or an image, canvas, or 3D tensor) to obtain an
  // array of detected faces from the MediaPipe graph. If passing in a video
  // stream, a single prediction per frame will be returned.
  const predictions = await model.estimateFaces({
    input: canvas_camera//document.querySelector("video")
  });
  console.log('bb');

pc上，检测一张小图片，用web-gl，大概1.7秒。

再改进一下，不要每次都从云端加载模型文件，保存在本地文件系统，下次从手机本地加载。

const tf_core = require('@tensorflow/tfjs-core');
const tf_plugin = require('./js/libs/@tensorflow/tfjs-plugin/index.js');
const tf_face=require('@tensorflow-models/face-landmarks-detection');
tf_plugin.configPlugin({
  //backendName:'wechat-webgl',
  fetchFunc: fetchWechat.fetchFunc(),
  tf:tf_core,
  webgl:tf_webgl,
  canvas: tf_canvas
},true);
let fs=wx.getFileSystemManager();
//const c_modelUrl='https://tfhub.dev/mediapipe/tfjs-model/facemesh/1/default/1';
const c_modelUrl='https://???.tcloudbaseapp.com/model/facemesh/model.json';
//const c_irisModelUrl='https://tfhub.dev/mediapipe/tfjs-model/iris/1/default/2';
const c_irisModelUrl='https://???.tcloudbaseapp.com/model/iris/model.json';
//const c_detectorModelUrl:'https://tfhub.dev/tensorflow/tfjs-model/blazeface/1/default/1';
const c_detectorModelUrl='https://???.tcloudbaseapp.com/model/blazeface/model.json';

const fileStorageHandler_blazeface = tf_plugin.fileStorageIO('face_blazeface', fs);
const fileStorageHandler_iris = tf_plugin.fileStorageIO('face_iris', fs);
const fileStorageHandler_facemesh = tf_plugin.fileStorageIO('face_facemesh', fs);
......
  let isFaceModelSaved=wx.getStorageSync('isFaceModelSaved');
  let model=null;
  if (isFaceModelSaved!='yes'){
    console.log('load model from server');
    model = await tf_face.load(
      tf_face.SupportedPackages.mediapipeFacemesh,
      {
        detectorModelUrl:c_detectorModelUrl,
        irisModelUrl:c_irisModelUrl,
        modelUrl:c_modelUrl,
        shouldLoadIrisModel:true
      }
    );
    console.log(model);
    model.pipeline.irisModel.save(fileStorageHandler_iris)
    model.pipeline.meshDetector.save(fileStorageHandler_facemesh);
    model.pipeline.boundingBoxDetector.blazeFaceModel.save(fileStorageHandler_blazeface);
    wx.setStorage({
      key:'isFaceModelSaved',
      data:'yes'
    });
  }
  else{
    console.log('from model from locale');
    model = await tf_face.load(
      tf_face.SupportedPackages.mediapipeFacemesh,
      {
        detectorModelUrl:fileStorageHandler_blazeface,
        irisModelUrl:fileStorageHandler_iris,
        modelUrl:fileStorageHandler_facemesh,
        shouldLoadIrisModel:true
      }
    );
    console.log(model);
  }

保存下来的文件在零时文件目录下，在pc上，可能是：C:\Users\xxxx\AppData\Local\微信开发者工具\User Data\8bd760e6f7c30cca133c1a584f36db58\WeappSimulator\WeappFileSystem\o6zAJs8Lo1aWsQT2veP8wlUxz6kg\wx283e6dfb50d72a13\usr\tensorflowjs_models

有3*3=9个文件：