API 文档

构建云毕业照小程序

最近更新时间:2020-09-21 16:18:55

本文介绍如何通过云开发、人脸融合 快速实现云毕业照小程序,并通过云开发 CMS 内容管理系统 随时管理小程序的内容数据。用户上传人脸照片即可生成多种毕业照,体验使用小程序的乐趣。

步骤1:制定小程序流程

本文开发的示例小程序基本流程如下:

  1. 用户选择一张人脸图片。
  2. 调用图片内容安全审核。
  3. 用户选择性别及学历信息,后台获取正确的素材 ID。
  4. 调用人脸融合 API,获取学士服图像。
  5. 用户选择背景图。
  6. 绘制云毕业照海报。

步骤2:创建云开发项目

参考 微信官方文档 创建云开发项目,并在新建项目页面中选择“小程序·云开发”。

步骤3:使用图片内容安全审查

用户需在小程序中上传图片,则小程序需具备图片内容安全审查能力。可在服务订单中的“授权的小程序”中指定小程序,本文以使用 珊瑚图片内容安全服务 为例,您可结合实际情况选择。如下图所示:

示例代码如下:

  • 图片压缩:由于本文使用的图片审核 API 需要图片 Base64 编码的内容,且最大不超过4M。则获取图片后,需首先进行图片压缩。示例代码如下:
    wx.compressImage({
      src: path, // 图片路径
      quality: 0.8, // 压缩质量,根据需求设置
      success:async(res)=> {
        resolve({
          data: res.tempFilePath
        })
      }
    })
  • 图片内容安全审查:调用“珊瑚”图片内容安全 API 示例代码如下:
    doImgSecCheck: function (ImageBase64) {
      var d = Date.now()
      wx.serviceMarket.invokeService({
        service: 'wxee446d750xxxx8b11',
        api: 'imgSecCheck',
        data: {
          "Action": "ImageModeration",
          "Scenes": ["PORN", "POLITICS", "TERRORISM"],
          "ImageUrl": "",
          "ImageBase64": ImageBase64,
          "Config": "",
          "Extra": ""
        },
      }).then(res => {
        console.log(JSON.stringify(res))
        wx.showModal({
          title: 'cost',
          content: (Date.now() - d) + ' ',
        })
      })
    },

步骤4:打通人脸融合 API

  1. 登录 人脸融合控制台,单击【立即开通】即可获取调用人脸融合 API 权限。
  2. 在“活动管理”页面,单击【创建活动】。
  3. 在弹出的“创建活动”窗口中根据指引创建活动,创建成功后如下图所示:
    说明:

    创建活动免费,每个活动均有500次免费调用。

  4. 选择活动所在行右侧的【素材管理】,进入素材管理页面。
  5. 单击【添加素材】,上传素材并记录素材信息,需将获取的信息通过 CMS 内容管理系统添加至小程序数据库。如下图所示,获取素材信息为“女 文科 学士服 qc_300380_8153xx_6”。

步骤5:使用云开发 CMS 内容管理系统

  1. 开通 CMS 内容管理系统,详情请参见 CMS 内容管理系统
  2. 在管理页选择左侧的【内容设置】,并在“内容设置”页面新建“模板图”的内容类型。如下图所示:
  3. 在“模板图”内容类型下新建条目,并填写打通人脸融合 API 步骤5 中获取的素材信息。如下图所示:

    单击【保存】后,即可在对应云数据库查看。如下图所示:

步骤6:使用云函数调用接口

  1. 创建云函数,本文以 faceMerge 为例。
  2. 在终端执行以下命令,安装 腾讯云开发者工具套件(SDK)3.0
    npm install tencentcloud-sdk-nodejs --save
  3. 为方便调用,本文对人脸融合 API 进行封装,并通过云函数入口文件 main 函数进行调用。如下图所示:

封装人脸融合 API 代码如下:

const tencentcloud = require("tencentcloud-sdk-nodejs");

// 导入对应产品模块的client models。
const FacefusionClient = tencentcloud.facefusion.v20181201.Client;
const models = tencentcloud.facefusion.v20181201.Models;

const Credential = tencentcloud.common.Credential;
const ClientProfile = tencentcloud.common.ClientProfile;
const HttpProfile = tencentcloud.common.HttpProfile;

// 实例化一个认证对象,入参需要传入腾讯云账户secretId,secretKey
let cred = new Credential("", "");

// 实例化一个http选项,可选的,没有特殊需求可以跳过。
let httpProfile = new HttpProfile();
httpProfile.endpoint = "facefusion.tencentcloudapi.com";//指定接入地域域名(默认就近接入)

// 实例化一个client选项,可选的,没有特殊需求可以跳过。
let clientProfile = new ClientProfile();
clientProfile.httpProfile = httpProfile;

// 实例化要请求产品
let client = new FacefusionClient(cred, "", clientProfile);
// 实例化一个请求对象,并填充参数
let req = new models.FaceFusionRequest();
/**
 * 调用腾讯AI人脸融合API
 * @param {String} ModelId 素材ID
 * @param {String} base64 用户头像base64
 */
const tencentFaceFusionApi = async(ModelId,base64)=>{
  return new Promise((resolve)=>{
    let params = '{\"ProjectId\":\"300380\",\"ModelId\":\"'+ModelId+'\",\"Image\":\"'+base64+'\",\"RspImgType\":\"base64\"}'
    // 传入参数
    req.from_json_string(params);
    // 通过client对象调用想要访问的接口,需要传入请求对象以及响应回调函数
    client.FaceFusion(req, function(errMsg, response) {
       // 返回response对象
      resolve({
        response,errMsg
      })
    });
  })
}
module.exports = {
  tencentFaceFusionApi
}

至此已完成了云毕业照小程序开发。小程序云开发给开发者带来了良好的体验,使开发者无需过多关注服务端的搭建和运维,只需专注于业务的开发和产品的实现即可。

目录