用云开发快速构建最美AI毕业照小程序

为什么要做这个小程序？

疫情原因，2020年的毕业季也不同了。很多毕业生没有举办正式的毕业典礼，也没有照毕业照，个人觉得这是人生的一大遗憾。为了弥补这一遗憾，我尝试用云开发快速实现一个AI云毕业照小程序，纪念我们的青春年华。

功能实现的思路是：用户上传人脸照片即可生成学士服云毕业照，小程序支持学士服、硕士服、博士服等个性服装,而且可以通过云开发CMS管理系统随时随地管理小程序云开发内容数据。

为什么选择了云开发？

云开发 CloudBase 是腾讯云首创的云原生一体化开发环境和工具平台，为开发者提供高可用、自动弹性扩缩的后端云服务，包含计算、存储、托管等 Serverless 化能力，可用于云端一体化开发多种端应用（小程序、公众号、Web 应用、H5、App、Flutter 客户端等），帮助开发者统一构建和管理后端服务和云资源，避免了应用开发过程中繁琐的服务器搭建及运维，开发者可以专注于业务逻辑的实现，开发门槛更低，效率更高。

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

CMS 开源地址

基于此，我认为云开发完美适配了本项目的开发需求，因此便开始用云开发进行开发，果然没令我失望！

小程序效果预览

小程序最终效果如图:

最终生成的毕业照片如图：

此小程序功能的大致实现路径为:

• 用户选择一张人脸图片；
• 调用图片内容安全审核；
• 用户选择性别，学历信息，获取正确的素材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

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

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

登录腾讯云 AI，进入管理控制台，开通人脸融合接口权限，地址: 

https://console.cloud.tencent.com/facefusion

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

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

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

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

可点击此处了解更多。

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

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

保存之后，对应的云数据库如图：

由于本小程序为云开发版本，无需配备后台服务器，所以只需在云函数中调用人脸融合 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，需要关心的事情变少了，但我们能做的事情却更多了。用云开发，我们不需要再过多关注服务端的搭建和运维，而只需专注于业务的开发和产品的实现。

点击文末阅读原文进入云开发社区官网，了解云开发的更多信息。

欢迎在下方评论区留言或在微信开放社区 进入云开发专区与我们交流。

☁

 更多精彩

点击下方图片即可了解

△ 2020小程序云开发挑战赛报名开启，海量大奖等你来拿！

△ 如何用云开发快速搭建实时 Todo List 应用

由于公众号推送规则更改，请多多分享、点赞和“在看”，以及时获取云开发Cloudbase的最新动态。

      点击在看让更多人发现精彩