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

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

项目背景

为什么要做这个小程序？

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

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

为什么选择了云开发？

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

而云开发 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

人脸融合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 之后，需要进行登录，在内容设置新建“模版图”的内容类型，如图：

cms

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

cms

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

数据库

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