微信小程序实现人脸检测功能攻略

1. 概述

人脸检测是计算机视觉领域中的一个重要的应用场景，在微信小程序中实现人脸检测功能也可以给用户带来极佳的用户体验。本攻略将介绍如何通过微信小程序实现人脸检测功能。

2. 实现步骤

2.1 在微信公众平台中创建小程序账号

首先需要在微信公众平台中创建小程序账号，此过程比较简单，这里就不详细介绍了。

2.2 新建小程序项目

在微信开发者工具中新建一个小程序项目，并填入相关的AppID和名称信息。在小程序的根目录下，创建一个名为 utils 的文件夹，并在该文件夹下新建一个名为 face.js 的文件，用于实现人脸检测功能。

2.3 引入百度人脸检测API

在 face.js 文件中，使用以下代码引入百度人脸检测API：

var ak = '您的AK';
var sk = '您的SK';

function b64_hmac_sha1(k, d) {
  var b64 = require('./base64').encode;
  if (k.length > 64) k = require('crypto').createHash('sha1').update(k).digest('hex');
  var ipad = Buffer.alloc(64, 0x36);
  var opad = Buffer.alloc(64, 0x5c);
  for (var i = 0; i < k.length; i++) {
    ipad[i] ^= k[i];
    opad[i] ^= k[i];
  }
  return require('crypto').createHash('sha1').update(Buffer.concat([opad, require('crypto').createHash('sha1').update(Buffer.concat([ipad, d])).digest()])).digest('hex');
}

/**
 * 生成请求参数
 * @param {Object} params
 */
function genParams(params) {
  // 1. 对参数名进行字典排序
  var sortedKey = Object.keys(params).sort();
  var len = sortedKey.length;
  var queryParams = [];
  for (var i = 0; i < len; i++) {
    var key = sortedKey[i];
    var value = params[key];
    queryParams.push(key + '=' + encodeURIComponent(value));
  }
  return queryParams.join('&');
}

/**
 * 生成签名
 * @param {Object} params 请求参数
 * @param {String} url 请求地址
 */
function genSign(params, url) {
  var paramsStr = genParams(params);
  var wholeStr = 'GET\n' + url + '\n' + paramsStr;
  var sign = b64_hmac_sha1(sk, wholeStr);
  return sign;
}

wx.get_url = function(params) {
  const DETECT_URL = 'https://aip.baidubce.com/rest/2.0/face/v3/detect';
  params = {
    ...params,
    access_token: wx.getStorageSync('access_token')
  };
  var url = DETECT_URL + '?' + genParams(params);
  var sign = genSign(params, DETECT_URL);
  return url + '&sign=' + encodeURIComponent(sign);
}

此处的 ak 和 sk 需要到百度AI控制台中申请相应权限后获取。需要注意的是，为了安全考虑，不要将 ak 和 sk 直接写在代码中，最好是放在服务器上或者存储在小程序云存储中。

2.4 实现人脸检测

在 face.js 文件中，使用以下代码实现人脸检测功能：

function detectFace(imgPath) {
  return new Promise((resolve, reject) => {
    wx.uploadFile({
      url: wx.get_url({
        image: base64_encode(imgPath),
        max_face_num: 1
      }),
      filePath: imgPath,
      name: 'image',
      success: res => {
        var data = JSON.parse(res.data);
        if (data.error_msg) {
          reject(data.error_msg);
        } else {
          resolve(data.result.face_list[0]);
        }
      },
      fail: error => {
        reject(error);
      }
    });
  });
}

其中的 uploadFile 方法用于上传图片，base64_encode 方法用于将图片文件编码为base64格式。此处只检测一张脸，如需检测多张脸需要将 max_face_num 参数设置为相应值。检测结果将以Promise形式返回，数据格式可参考 百度AI人脸检测API接口文档。

2.5 在页面中使用人脸检测功能

在需要使用人脸检测功能的页面中，使用以下代码调用 detectFace 方法：

wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success: res => {
    var tempFilePath = res.tempFilePaths[0];
    detectFace(tempFilePath).then(face => {
      console.log(face);
      // TODO: 处理人脸检测结果
    }).catch(error => {
      console.error(error);
    });
  }
});

其中的 chooseImage 方法用于从相册或者相机中选择图片，并将选择的图片文件路径传入 detectFace 方法中。detectFace 方法会返回一个Promise对象，使用 .then() 和 .catch() 来处理检测结果和错误信息。

3. 示例说明

示例1： 在图片上展示人脸框

在成功检测到人脸后，可以在图片上展示人脸框。考虑到小程序中可能会用到该功能，这里给出一个示例说明。

function showFaceRect(canvas, face) {
  var ctx = canvas.getContext('2d');
  var sx = parseInt(face.location.left * canvas.width / face.location.width);
  var sy = parseInt(face.location.top * canvas.height / face.location.height);
  var sWidth = parseInt(face.location.width * canvas.width / face.location.width);
  var sHeight = parseInt(face.location.height * canvas.height / face.location.height);
  ctx.lineWidth = 2;
  ctx.strokeStyle = '#FF0000';
  ctx.strokeRect(sx, sy, sWidth, sHeight);
}

示例2： 判断是否笑容

在成功检测到人脸后，可以通过判断笑容程度来实现笑容检测功能。考虑到小程序中可能会用到该功能，这里给出一个示例说明。

if (face.expression.type == 'smile') {
  if (face.expression.probability > 0.9) {
    console.log('非常高兴');
  } else if (face.expression.probability > 0.8) {
    console.log('比较高兴');
  } else if (face.expression.probability > 0.7) {
    console.log('有点高兴');
  } else {
    console.log('没有笑');
  }
}

此处以 expression 参数为例，更多参数可参考 百度AI人脸检测API接口文档。

本文链接：https://my.lmcjl.com/post/15325.html