實戰丨用雲開發快速建構最美AI畢業照小程式

畢業季，走起~

疫情原因,2020年的畢業季也不同了。很多畢業生沒有舉辦正式的畢業典禮,也沒有照畢業照,覺得這是人生的一大遺憾.為了彌補這一遺憾,我嘗試用雲開發快速實作一個雲畢業照小程式，紀念我們的青春年華，使用者上傳人臉照片即可生成學士服雲畢業照,小程式支援學士服、碩士服、博士服等個性服裝,而且可以通過雲開發CMS管理系統随時随地管理小程式雲開發内容資料。

雲開發提供了一站式服務，開發者無需管理後端服務架構，即可輕松擁有各種後端能力，極大減輕開發過程中繁雜的後端操作，使小程式開發更簡單。

雲開發 CMS 内容管理系統是雲開發提供的一個擴充程式，可以在雲開發控制台一鍵安裝在自己的雲開發環境中，不用編寫代碼就可以使用，還提供了 PC /移動端浏覽器通路支援，支援文本、富文本、圖檔、檔案、關聯類型等多種類型的可視化編輯。

小程式效果預覽：

最終生成的照片如圖:

小程式功能的大緻思路:

使用者選擇一張人臉圖檔

調用圖檔内容安全稽核

使用者選擇性别,學曆資訊,擷取正确的素材ID

調用騰訊AI人臉融合API,得到學士服圖像

使用者選擇背景圖,

canvas繪制使用者雲畢業照海報

在項目的開發前，應進行以下準備：

一、建立小程式雲開發項目，并開通“珊瑚”圖檔内容安全

首先，在微信開發者工具建立應用，并勾選小程式·雲開發。

其次，由于小程式需要使用者上傳圖檔，是以必須使用圖檔内容安全審查，需要開通：”珊瑚“圖檔内容安全，（測試階段選擇免費版本資源包即可），位址：

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

請在訂單中授權的小程式中勾選指定的小程式，如圖：

由于圖檔稽核API限制圖檔經過base64編碼的内容。最大不得超過4M,是以此處需要先壓縮後調用稽核,壓縮代碼如下:

在頁面中調用珊瑚圖檔内容安全API代碼如下:

​

二、登入騰訊雲 AI 并開通人臉融合 API

人臉融合簡介

騰訊雲神圖·人臉融合（Face Fusion）是由騰訊雲與優圖實驗室、天天P圖聯合打造的 AI 變臉玩法。通過快速精準地定位人臉關鍵點，将使用者上傳的照片與特定形象進行面部層面融合，使生成的圖檔同時具備使用者與特定形象的外貌特征，支援單臉、多臉、選臉融合，滿足不同的營銷活動需求。

開通前需要準備好我們的素材圖,也就是模版圖,素材圖用途如下:

登入騰訊AI,進入管理控制台,開通人臉融合接口權限：

開通後請點選建立活動,填寫活動名稱,活動建立完成後如圖:

建立活動免費,在程式測試階段,可以使用活動包含的500次免費調用

活動建立完畢後,在活動清單内點選“素材管理”給活動添加素材,并記錄素材ID,例如下圖素材對應的是“女 文科 學士服 qc_300380_815359_6”,需要将這些資訊通過CMS管理系統添加到小程式資料庫,素材ID如下圖:

雲開發CMS簡介：

雲開發 CMS 内容管理系統是雲開發 CloudBase 提供的一個擴充程式，可以在雲開發控制台一鍵安裝在自己的雲開發環境中，讓開發人員和内容營運者随時随地管理小程式 / Web 等多端産生的内容資料。無須編寫代碼即可使用，還提供了 PC / 移動端浏覽器的通路支援，支援文本、富文本、Markdown、圖檔、檔案、關聯類型等多種類型的可視化編輯。

點選此處了解更多

開通CMS之後,需要登入CMS,在内容設定建立“模版圖”的内容類型,如圖:

内容類型建立完畢之後,在“模版圖”内容類型下建立條目,填入剛才的素材ID等資訊,如圖:

儲存之後,對應的雲資料庫如圖:

由于本小程式為雲開發版本,并沒有背景伺服器,是以人臉融合API将在雲函數完成調用.

首先需要給建立一個雲函數“faceMerge”,并在終端為雲函數安裝騰訊雲開發者工具套件（SDK）3.0,

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

安裝如圖:

為友善調用,此處将人臉融合API封裝,然後通過雲函數入口檔案main函數調用,如圖

封裝人臉融合API代碼,代碼内有詳細注釋,如下:

雲畢業相冊開發核心内容有:微信小程式雲開發,騰訊雲新能力雲開發CMS内容管理系統,騰訊AI開放平台,珊瑚圖檔内容安全。

使用小程式雲開發的體驗用一句話概括就是：Less is more，需要關心的事情變少了，但我們能做的事情卻更多了。用雲開發，我們不需要再過多關注服務端的搭建和運維，而隻需專注于業務的開發和産品的實作。