项目背景

为什么要做这个小程序

疫情原因,2020年的毕业季也不同了。很多毕业生没有举办正式的毕业典礼,也没有照毕业照,觉得这是人生的一大遗憾.为了弥补这一遗憾,我尝试用云开发快速实现一个云毕业照小程序，纪念我们的青春年华，用户上传人脸照片即可生成学士服云毕业照,小程序支持学士服、硕士服、博士服等个性服装,而且可以通过云开发CMS管理系统随时随地管理小程序云开发内容数据。

为什么选择了云开发？

云开发提供了一站式服务，开发者无需管理后端服务架构，即可轻松拥有各种后端能力，极大减轻开发过程中繁杂的后端操作，使小程序开发更简单。

云开发 CMS 内容管理系统是云开发提供的一个扩展程序，可以在云开发控制台一键安装在自己的云开发环境中，不用编写代码就可以使用，还提供了 PC /移动端浏览器访问支持，支持文本、富文本、图片、文件、关联类型等多种类型的可视化编辑。

小程序效果预览：

最终生成的照片如图:

小程序功能的大致思路:

• 用户选择一张人脸图片
• 调用图片内容安全审核
• 用户选择性别,学历信息,获取正确的素材ID
• 调用腾讯AI人脸融合API,得到学士服图像
• 用户选择背景图,
• canvas绘制用户云毕业照海报

资源准备

在项目的开发前，应进行以下准备：

一、新建小程序云开发项目，并开通“珊瑚”图片内容安全

首先，在微信开发者工具新建应用，并勾选小程序·云开发。

其次，由于小程序需要用户上传图片，所以必须使用图片内容安全审查，需要开通：”珊瑚“图片内容安全，（测试阶段选择免费版本资源包即可），地址：

https://developers.weixin.qq.com/community/servicemarket/detail/000a246b6fca70b76a896e6a25ec15

请在订单中授权的小程序中勾选指定的小程序，如图：

由于图片审核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: 'wxee446d7507c68b11',
      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) + ' ',
      })
    })
  },

​

二、登录腾讯云 AI 并开通人脸融合 API

人脸融合简介

腾讯云神图·人脸融合（Face Fusion）是由腾讯云与优图实验室、天天P图联合打造的 AI 变脸玩法。通过快速精准地定位人脸关键点，将用户上传的照片与特定形象进行面部层面融合，使生成的图片同时具备用户与特定形象的外貌特征，支持单脸、多脸、选脸融合，满足不同的营销活动需求。

开通前需要准备好我们的素材图,也就是模版图,素材图用途如下:

登录腾讯AI,进入管理控制台,开通人脸融合接口权限：

开通后请点击创建活动,填写活动名称,活动创建完成后如图:

创建活动免费,在程序测试阶段,可以使用活动包含的500次免费调用

活动创建完毕后,在活动列表内点击“素材管理”给活动添加素材,并记录素材ID,例如下图素材对应的是“女 文科 学士服 qc_300380_815359_6”,需要将这些信息通过CMS管理系统添加到小程序数据库,素材ID如下图:

使用云开发 CMS

云开发CMS简介：

云开发 CMS 内容管理系统是云开发 CloudBase 提供的一个扩展程序，可以在云开发控制台一键安装在自己的云开发环境中，让开发人员和内容运营者随时随地管理小程序 / Web 等多端产生的内容数据。无须编写代码即可使用，还提供了 PC / 移动端浏览器的访问支持，支持文本、富文本、Markdown、图片、文件、关联类型等多种类型的可视化编辑。

点击此处了解更多

开通CMS之后,需要登录CMS,在内容设置新建“模版图”的内容类型,如图:

内容类型新建完毕之后,在“模版图”内容类型下新建条目,填入刚才的素材ID等信息,如图:

保存之后,对应的云数据库如图:

云函数调用 AI 接口

由于本小程序为云开发版本,并没有后台服务器,所以人脸融合API将在云函数完成调用.

首先需要给新建一个云函数“faceMerge”,并在终端为云函数安装腾讯云开发者工具套件（SDK）3.0,

SDK地址: https://github.com/TencentCloud/tencentcloud-sdk-nodejs

安装如图:

为方便调用,此处将人脸融合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
}

总结

云毕业相册开发核心内容有:微信小程序云开发,腾讯云新能力云开发CMS内容管理系统,腾讯AI开放平台,珊瑚图片内容安全。

使用小程序云开发的体验用一句话概括就是：**Less is more，需要关心的事情变少了，但我们能做的事情却更多了。**用云开发，我们不需要再过多关注服务端的搭建和运维，而只需专注于业务的开发和产品的实现。