实战丨用云开发快速构建最美AI毕业照小程序
项目背景
为什么要做这个小程序
疫情原因,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，需要关心的事情变少了，但我们能做的事情却更多了。**用云开发，我们不需要再过多关注服务端的搭建和运维，而只需专注于业务的开发和产品的实现。