最佳实践 | 用腾讯云 AI 人脸融合实现云毕业照推广活动小程序

Page({
  data: {},
  async chooseMediaSuccessCB({ tempFiles }) {
    const tempFile = tempFiles[0];
    // 将临时图片上传到云存储
    const { fileID } = await wx.cloud.uploadFile({
      // 可设置随机字符串作为存储名称存储
      cloudPath: 'xxxxxx.jpg',
      filePath: tempFile,
    });
    // 完成后，将图片结果作为参数传递到结果页
    wx.navigateTo({
      url: 'result?userImage=' + fileID, // 结果页地址
    });
  },
  // 相册按钮响应事件
  tapAlbum() {
    wx.chooseMedia({
      count: 1,
      mediaType: ['image'],
      sourceType: ['album'],
      sizeType: ['compressed'],
      success: this.chooseMediaSuccessCB,
    });
  },
  // 拍摄按钮响应事件
  async tapShoot() {
    const { authSetting } = await wx.getSetting({});
    const shoot = () => {
      wx.chooseMedia({
        count: 1,
        mediaType: ['image'],
        sourceType: ['camera'],
        // 默认使用前置摄像头
        camera: 'front',
        sizeType: ['compressed'],
        success: this.chooseMediaSuccessCB,
      });
    };
    // 拍摄前需要咨询摄像头权限
    if (!authSetting['scope.camera']) {
      wx.authorize({
        scope: 'scope.camera',
        success() {
          shoot();
        },
      })
    } else {
      shoot();
    }
  },
})

Page({
  data: {
    userImage: '',
    resultImage: '',
  },
  async onLoad(option) {
    const userImage = option.userImage;
    this.setData({
      userImage,
    });
    // 默认进行一次人脸融合请求，获取结果并展示
    await this.fuseFace(userImage);
  },
  // 换造型按钮响应事件
  async tapReplace() {
    await this.fuseFace(this.data.userImage);
  },
  async fuseFace(userImage) {
    // 获取随机模板ID
    const modelId = this.getModelId();
    let resultImage = this.getResult(modelId);
    // 如果该模板ID在缓存中有结果，直接拿缓存结果返回
    if (resultImage) {
      this.setData({
        resultImage,
      });
      return;
    }
    // 请求腾讯云人脸融合服务获取结果
    // 此处使用小程序云开发，可另行在服务端实现腾讯云请求
    const { result: res } = await wx.cloud.callFunction({
      name: 'TencentCloudAI',
      data: {
        method: 'facefusion/FuseFace',
        data： {
          ProjectId: 'xxxx', // 在控制台创建的活动ID
          ModelId: modelId,
          RspImgType: 'url',
          MergeInfos: [{
            Url: userImage,
          }],
        }，
      },
    });
    if (res && res.Response && res.Response.FusedImage) {
      resultImage = res.Response.FusedImage;
      this.setData({
        resultImage,
      });
      // 将modelID与融合结果配对存进缓存
      this.saveResult(modelId, resultImage);
    }
  },
  // 随机返回在腾讯云人脸融合控制台上传的模板id
  getModelId() {}，
  // 根据modelId返回缓存结果，没有结果返回null
  getResult(modelId) {},
  // 将modelID与融合结果配对存进缓存
  saveResult(modelId, resultImage);
})

/* requestYunApi.js */
// 引入腾讯云服务SDK
const tencentcloud = require('tencentcloud-sdk-nodejs');
const { Credential } = tencentcloud.common;
const { ClientProfile } = tencentcloud.common;
const { HttpProfile } = tencentcloud.common;
// 密钥信息，妥善保管
const secretId = '';
const secretKey = '';
function requestAPI({
  endpoint, // 请求域名 (可选)
  service, // 服务前缀
  action, // 接口名称
  version, // 版本号
  region, // 地域 (可选)
  data, // 请求数据
}) {
  const { Client } = tencentcloud[service][version];
  const { Models } = tencentcloud[service][version];
  const cred = new Credential(secretId, secretKey);
  const httpProfile = new HttpProfile();
  httpProfile.endpoint = endpoint || `${service}.tencentcloudapi.com`;
  const clientProfile = new ClientProfile();
  clientProfile.httpProfile = httpProfile;
  const client = new Client(cred, region || 'ap-guangzhou', clientProfile);
  const req = new Models[`${action}Request`]();
  const reqParams = JSON.stringify({ ...data });
  req.from_json_string(reqParams);
  return new Promise((resolve, reject) => {
    client[action](req, (errMsg, response) => {
      if (errMsg) {
        reject(errMsg);
        return;
      }
      resolve(JSON.parse(response.to_json_string() || {}));
    });
  });
}
module.exports = requestAPI;

/* 云函数TencentCloudAI */
const cloud = require('wx-server-sdk');
// 腾讯云API请求函数
const requestAPI = require('./requestYunApi');
cloud.init();
function getFileUrl(url) {
  // 如果是 cloud:// 则，换取云文件真实链接
  if (/^cloud:\/\//.test(url)) {
    const { fileList } = await cloud.getTempFileURL({
      fileList: [url],
    }); 
    if (!fileList || !fileList[0]) {
      throw new Error('无法获取文件');
    } 
    return fileList[0].tempFileURL;
  }
  return url;
}
// 云函数入口函数
exports.main = async (event) => {
  // 有云存储fileID则将其转换为http url
  if (event.data.MergeInfos) {
    const mergeInfos = event.data.MergeInfos;
    event.data.MergeInfos = await Promise.all(mergeInfos.map(mergeInfo => {
      ...mergeInfo,
      Url: await getFileUrl(cloud, e.Url),
    }));
  }
  // 请求参数，可以配置不同腾讯云请求参数
  const configs = {
    'facefusion/FuseFace': {
      service: 'facefusion',
      action: 'FuseFace',
      version: 'v20181201',
    },
  };
  // 发起请求
  const requestRes = {
    Response: await requestAPI({
      ...configs[event.method],
      data: event.data,
    }),
  };
  return requestRes;
}