項目背景
為什么要做這個小程序
疫情原因,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，需要關心的事情變少了，但我們能做的事情卻更多了。用雲開發，我們不需要再過多關注服務端的搭建和運維，而只需專注於業務的開發和產品的實現。