整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
讀：SpringBoot 是基于 Java Spring 框架的套件，它預裝了 Spring 的一系列組件，讓開發(fā)者只需要很少的配置就可以創(chuàng)建獨立運行的應用程序。在云原生的世界里，有大量的平臺可以運行 Spring Boot 應用，例如虛擬機、容器等。但其中最有吸引力的，是以 Serverless 的方式運行 Spring Boot 應用。我將通過一系列文章，從架構(gòu)，部署，監(jiān)控、性能、安全等 5 個方面來分析 Serverless 平臺運行 Spring Boot 應用的優(yōu)劣。為了讓分析更有代表性，我選擇了 Github 上 star 數(shù)超過 50k 的電商應用 mall 作為示例。
我們在上一篇的“Spring Boot on FC - 架構(gòu)”一文中，對 Mall 應用架構(gòu)以及 Serverless 平臺有了一個基本的介紹，下面我會在本篇中為各位介紹如何將 Mall 應用部署到函數(shù)計算平臺上。
準備階段：
注意，如果您使用了云主機，請先檢查主機對應的安全組配置是否允許入方向的網(wǎng)絡請求。一般的主機在創(chuàng)建后，對于入方向的網(wǎng)絡端口訪問做了嚴格限制。我們需要手動允許訪問 MySQL 的 3306 端口，Redis 的 6379 端口等。如下圖所示，我手動設置了安全組，允許所有入方向的網(wǎng)絡請求。
1. 部署依賴軟件
Mall 應用依賴 MySQL，Redis，MongoDB，ElasticSearch，RabbitMQ 等軟件。這些軟件在云上都有對應的云產(chǎn)品。在生產(chǎn)環(huán)境，推薦使用云產(chǎn)品獲得更好的性能和可用性。在個人開發(fā)或者 POC 原型演示場景下，我們選擇一臺 VM 來容器化部署所有依賴的軟件。
1.1. Clone 代碼倉庫
git clone https://github.com/hryang/mall
國內(nèi)訪問 github 網(wǎng)絡不太好，如果 clone 太慢，可使用 Gitee 地址。
git clone https://gitee.com/aliyunfc/mall.git
1.2. 構(gòu)建和運行 Docker 鏡像
在代碼根目錄的 docker 文件夾下，有每個依賴軟件對應的 Dockerfile。運行代碼根目錄下的 run.sh 腳本，會自動構(gòu)建所有依賴軟件的 Docker 鏡像，并在本機運行。
sudo bash docker.sh
1.3. 驗證依賴軟件運行狀態(tài)
執(zhí)行 docker ps 命令，檢查依賴軟件是否正常運行。
sudo docker ps
2.部署 mall 應用
2.1. 修改 mall 應用配置
修改 mall-admin/src/main/resources/application-prod.yml，mall-portal/src/main/resources/application-prod.yml，mall-search/src/main/resources/application-prod.yml 3個yaml 文件，將其中的 host 字段改成您第1步安裝 MySQL 等軟件的節(jié)點的公網(wǎng) ip。
2.2. 生成 mall 應用容器鏡像
執(zhí)行 maven 打包命令，生成 docker 鏡像。
本地是 java8 或者 java11 環(huán)境均可
sudo -E mvn package
成功后，將顯示如下成功信息。
執(zhí)行 sudo docker images，應該能看到 mall/mall-admin，mall/mall-portal，mall/mall-search 的 1.0-SNAPSHOT 版本的鏡像。
2.3. 將鏡像推送到阿里云鏡像倉庫
首先登錄阿里云鏡像倉庫控制臺，選擇個人版實例，根據(jù)提示讓 docker 登錄阿里云鏡像倉庫。
然后創(chuàng)建命名空間。如下圖所示，我們創(chuàng)建了名為 quanxi-hryang 的命名空間。
根據(jù)之前的步驟，我們已經(jīng)在本地生成了 mall/mall-admin, mall/mall-portal, mall/mall-search 的鏡像。執(zhí)行下面的命令，將 mall-admin 鏡像推送到杭州區(qū)域，quanxi-hryang 命名空間下的鏡像倉庫。請將下面命令中的 cn-hangzhou 和 quanxi-hryang 修改為您自己的鏡像倉庫地域和命名空間。mall/mall-portal，mall/mall-search 以此類推。
sudo docker tag mall/mall-admin:1.0-SNAPSHOT registry.cn-hangzhou.aliyuncs.com/quanxi-hryang/mall-admin:1.0-SNAPSHOT
sudo docker push registry.cn-hangzhou.aliyuncs.com/quanxi-hryang/mall-admin:1.0-SNAPSHOT
2.4. 修改 Serverless Devs 工具的應用定義
我們使用 Serverless Devs 工具來定義和部署應用。在項目根目錄下，有 s.yaml文件，這是 Serverless Devs 工具的項目定義文件。這里面定義了函數(shù)計算的資源。如下圖所示，我們在函數(shù)計算上定義了名為 mall-admin 服務及其下的 mall-admin 函數(shù)。函數(shù)中定義了 port，內(nèi)存大小，超時時間，運行時等屬性。紅框中的內(nèi)容是您需要根據(jù)自己的配置修改的。
建議：上面的鏡像地址最好使用 registry-vpc.cn-hangzhou.aliyuncs.com/fc-demo/mall-admin:1.0-SNAPSHOT 這么形式
2.5. 部署 mall 應用到函數(shù)計算平臺
執(zhí)行 s deploy 命令，部署成功后，您將看到對應的訪問網(wǎng)址。
在瀏覽器中輸入生成的網(wǎng)址，如果顯示 “暫未登錄或token已經(jīng)過期”，說明服務部署成功。
注意：Serverless 的特點是系統(tǒng)默認在請求到達后才創(chuàng)建實例，所以第一次啟動時間比較長，稱之為冷啟動。Mall 應用啟動一般需要30秒左右。后面我們將在性能調(diào)優(yōu)文章中來回顧這個問題，使用一系列手段優(yōu)化。
訪問對應的 swagger api 調(diào)試頁面 host/swagger-ui.html，就能調(diào)試相關的后端 API 了。
2.6. 查看應用日志
我們在 s.yaml 中為每個服務都設置了 logConfig:auto，代表 serverless-devs 工具會自動為服務創(chuàng)建日志庫（LogStore），所有的服務都共享一個日志庫。應用所有的日志都輸出到。您可以使用 s logs 命令查看所有服務某個時間點的日志；也可以使用 s mall-admin logs 查看 mall-admin 函數(shù)的日志；也可以使用 s mall-admin logs -t以跟隨模式實時顯示當前時間點之后的日志；也可以使用 s mall-admin logs --keyword=abc 查看包含關鍵詞 abc 的日志。s logs 對于您了解服務運行情況和問題診斷非常有用。例如我們執(zhí)行 s mall-admin logs -t 進入跟隨模式，然后在瀏覽器中訪問 mall-admin 服務的 endpoint，就能看到整個應用的啟動和請求處理日志。
2.7. 部署 mall 前端項目（可選）
Mall 也提供了一個前端界面，基于 Vue+Element 實現(xiàn)。主要包括商品管理、訂單管理、會員管理、促銷管理、運營管理、內(nèi)容管理、統(tǒng)計報表、財務管理、權(quán)限管理、設置等功能。該項目同樣可以無縫運行在函數(shù)計算上。
首先在所在機器上安裝 nodejs12 和 npm，并下載項目源代碼。
git clone https://github.com/hryang/mall-admin-web
國內(nèi)訪問 github 網(wǎng)絡不太好，如果 clone 太慢，可使用下面的代理地址。
git clone https://gitee.com/aliyunfc/mall-admin-web.git
注意：必須是 nodejs 12 或者 14，太新的 node 版本會編譯失敗！
修改 config/prod.env.js，將其中的 BASE_API 改為之前在函數(shù)計算上部署成功的 mall-admin 的 endpoint。
在項目根目錄執(zhí)行下面的命令，構(gòu)建前端項目。
npm install
npm run build
運行成功后，會生成 dist 目錄。運行項目根目錄下的 docker.sh 腳本，生成鏡像。
sudo bash docker.sh
運行 docker images 命令，將看到 mall/mall-admin-web 鏡像已經(jīng)成功生成了。將鏡像推送到阿里云鏡像倉庫。同理，請將下面命令中的 cn-hangzhou 和 quanxi-hryang 修改為您自己的鏡像倉庫地域和命名空間。
sudo docker tag mall/mall-admin-web:1.0-SNAPSHOT registry.cn-hangzhou.aliyuncs.com/quanxi-hryang/mall-admin-web:1.0-SNAPSHOT
sudo docker push registry.cn-hangzhou.aliyuncs.com/quanxi-hryang/mall-admin-web:1.0-SNAPSHOT
修改項目根目錄下的 s.yaml ，和部署 mall-admin 類似，根據(jù)您的配置調(diào)整 access，region，將 image 改為上一步推送成功的鏡像地址。
執(zhí)行 s deploy，當部署成功后，就能看到 mall-admin-web 服務的網(wǎng)址。通過瀏覽器訪問，將看到登錄頁面。填入密碼 macro123，就能看到完整的效果。
注意：第一次由于冷啟動，登錄頁面可能會報超時錯誤。重新刷新頁面即可。我們將在后面的性能調(diào)優(yōu)文章中優(yōu)化冷啟動性能。
由于 Serverless 平臺內(nèi)置了網(wǎng)關，負責路由，實例拉起/運行/容錯/自動擴縮容等功能，因此開發(fā)者上傳應用代碼包或者鏡像后，就已經(jīng)發(fā)布了一個彈性高可用的服務?？偨Y(jié)起來，只要完成下面5步就在函數(shù)計算平臺上完整部署了 mall 應用。后續(xù)對應用的更新，只需要重復步驟4和5?？梢姡琒erverless 將環(huán)境配置和運維等重復性的工作免除了，開發(fā)運維效率大幅提升。
相關鏈接匯總;
https://spring.io/projects/spring-boot
https://github.com/macrozheng/mall
http://serverless-devs.com/zh-cn/docs/installed/cliinstall.html
原文鏈接：https://developer.aliyun.com/article/845224?utm_content=g_1000315172
本文為阿里云原創(chuàng)內(nèi)容，未經(jīng)允許不得轉(zhuǎn)載。
開發(fā)Web網(wǎng)站過程中可能會遇到需要添加許多宣傳頁，這些宣傳頁往往不需要什么后端邏輯代碼，這時候我們就不希望為每一個宣傳頁都添加一個Action，
而是希望只添加一個Action，然后結(jié)合路由動態(tài)的指向不同的視圖。而動態(tài)的指向不同的視圖這時候可能就需要用到判斷某個視圖是否存在，不存在執(zhí)行某個邏輯。
下面我們來看下Demo：
首先來看下Demo的項目結(jié)構(gòu)
接下來看下核心代碼
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.ViewEngines;
namespace IsExistsViewDemo.Controllers
{
/// <summary>
/// 靜態(tài)宣傳頁
/// </summary>
public class DHtmlController : Controller
{
#region 字段和屬性
/// <summary>
/// 混合視圖引擎
/// </summary>
private readonly ICompositeViewEngine _compositeViewEngine;
#endregion 字段和屬性
#region 構(gòu)造函數(shù)
/// <summary>
/// 構(gòu)造函數(shù)
/// </summary>
public DHtmlController(ICompositeViewEngine compositeViewEngine)
{
_compositeViewEngine=compositeViewEngine;
}
#endregion 構(gòu)造函數(shù)
#region 宣傳頁
/// <summary>
/// 宣傳頁
/// </summary>
/// <param name="viewname">
/// 視圖名稱
/// </param>
/// <returns>
/// </returns>
[Route("dhtml/{viewname}/")]
public IActionResult Index(string viewname)
{
var view=_compositeViewEngine.FindView(ControllerContext, viewname, false)?.View;
if (view==null) //判斷指定的視圖文件是否存在
{
// TODO
return View("NotFound");
}
return View(viewname);
}
#endregion 宣傳頁
#region 直通車宣傳頁
/// <summary>
/// 直通車宣傳頁
/// </summary>
/// <param name="viewname">
/// 視圖名稱
/// </param>
/// <returns>
/// </returns>
[Route("dhtml/ztc/{viewname}.html")]
public IActionResult ZTC(string viewname)
{
var view=_compositeViewEngine.FindView(ControllerContext, $"ZTC/{viewname}", false)?.View;
if (view==null) //判斷指定的視圖文件是否存在
{
// TODO
return View("NotFound");
}
return View($"ZTC/{viewname}");
}
#endregion 直通車宣傳頁
}
}
到大型節(jié)假日，我們常會發(fā)現(xiàn)社交平臺都會提供生成頭像裝飾的小工具，很是新奇好玩。如果從技術的維度看，這類平臺 / 工具一般都是通過下面兩個方法給我們生成頭像裝飾的：
增加頭像裝飾的功能其實很容易實現(xiàn)，首先選擇一張圖片，上傳自己的頭像，然后函數(shù)部分進行圖像的合成，這一部分并沒有涉及到機器學習算法，僅僅是圖像合成相關算法。
通過用戶上傳的圖片，在指定位置增加預定圖片 / 用戶選擇的圖片作為裝飾物進行添加：
復制代碼
def do_circle(base_pic): icon_pic=Image.open(base_pic).convert("RGBA") icon_pic=icon_pic.resize((500, 500), Image.ANTIALIAS) icon_pic_x, icon_pic_y=icon_pic.size temp_icon_pic=Image.new('RGBA', (icon_pic_x + 600, icon_pic_y + 600), (255, 255, 255)) temp_icon_pic.paste(icon_pic, (300, 300), icon_pic) ima=temp_icon_pic.resize((200, 200), Image.ANTIALIAS) size=ima.size # 因為是要圓形，所以需要正方形的圖片 r2=min(size[0], size[1]) if size[0] !=size[1]: ima=ima.resize((r2, r2), Image.ANTIALIAS) # 最后生成圓的半徑 r3=60 imb=Image.new('RGBA', (r3 * 2, r3 * 2), (255, 255, 255, 0)) pima=ima.load() # 像素的訪問對象 pimb=imb.load() r=float(r2 / 2) # 圓心橫坐標 for i in range(r2): for j in range(r2): lx=abs(i - r) # 到圓心距離的橫坐標 ly=abs(j - r) # 到圓心距離的縱坐標 l=(pow(lx, 2) + pow(ly, 2)) ** 0.5 # 三角函數(shù) 半徑 if l < r3: pimb[i - (r - r3), j - (r - r3)]=pima[i, j] return imb 復制代碼
def add_decorate(base_pic): try: base_pic="./base/%s.png" % (str(base_pic)) user_pic=Image.open("/tmp/picture.png").convert("RGBA") temp_basee_user_pic=Image.new('RGBA', (440, 440), (255, 255, 255)) user_pic=user_pic.resize((400, 400), Image.ANTIALIAS) temp_basee_user_pic.paste(user_pic, (20, 20)) temp_basee_user_pic.paste(do_circle(base_pic), (295, 295), do_circle(base_pic)) temp_basee_user_pic.save("/tmp/output.png") return True except Exception as e: print(e) return False復制代碼
def test(): with open("test.png", 'rb') as f: image=f.read() image_base64=str(base64.b64encode(image), encoding='utf-8') event={ "requestContext": { "serviceId": "service-f94sy04v", "path": "/test/{path}", "httpMethod": "POST", "requestId": "c6af9ac6-7b61-11e6-9a41-93e8deadbeef", "identity": { "secretId": "abdcdxxxxxxxsdfs" }, "sourceIp": "14.17.22.34", "stage": "release" }, "headers": { "Accept-Language": "en-US,en,cn", "Accept": "text/html,application/xml,application/json", "Host": "service-3ei3tii4-251000691.ap-guangzhou.apigateway.myqloud.com", "User-Agent": "User Agent String" }, "body": "{\"pic\":\"%s\", \"base\":\"1\"}" % image_base64, "pathParameters": { "path": "value" }, "queryStringParameters": { "foo": "bar" }, "headerParameters": { "Refer": "10.0.2.14" }, "stageVariables": { "stage": "release" }, "path": "/test/value", "queryString": { "foo": "bar", "bob": "alice" }, "httpMethod": "POST" } print(main_handler(event, None)) if __name__=="__main__": test()復制代碼
def return_msg(error, msg): return_data={ "uuid": str(uuid.uuid1()), "error": error, "message": msg } print(return_data) return return_data復制代碼
import base64, jsonfrom PIL import Imageimport uuid def main_handler(event, context): try: print(" 將接收到的 base64 圖像轉(zhuǎn)為 pic") imgData=base64.b64decode(json.loads(event["body"])["pic"].split("base64,")[1]) with open('/tmp/picture.png', 'wb') as f: f.write(imgData) basePic=json.loads(event["body"])["base"] addResult=add_decorate(basePic) if addResult: with open("/tmp/output.png", "rb") as f: base64Data=str(base64.b64encode(f.read()), encoding='utf-8') return return_msg(False, {"picture": base64Data}) else: return return_msg(True, " 飾品添加失敗 ") except Exception as e: return return_msg(True, " 數(shù)據(jù)處理異常： %s" % str(e))完成后端圖像合成功能，制作前端頁面：
復制代碼
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>2020 頭像大變樣 - 頭像 SHOW - 自豪的采用騰訊云 Serverless 架構(gòu)！</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <script type="text/javascript"> thisPic=null function getFileUrl(sourceId) { var url; thisPic=document.getElementById(sourceId).files.item(0) if (navigator.userAgent.indexOf("MSIE") >=1) { // IE url=document.getElementById(sourceId).value; } else if (navigator.userAgent.indexOf("Firefox") > 0) { // Firefox url=window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); } else if (navigator.userAgent.indexOf("Chrome") > 0) { // Chrome url=window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); } return url; } function preImg(sourceId, targetId) { var url=getFileUrl(sourceId); var imgPre=document.getElementById(targetId); imgPre.aaaaaa=url; imgPre.style="display: block;"; } function clickChose() { document.getElementById("imgOne").click() } function getNewPhoto() { document.getElementById("result").innerText=" 系統(tǒng)處理中，請稍后..." var oFReader=new FileReader(); oFReader.readAsDataURL(thisPic); oFReader.onload=function (oFREvent) { var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 瀏覽器執(zhí)行代碼 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function () { if (xmlhttp.readyState==4 && xmlhttp.status==200) { if (JSON.parse(xmlhttp.responseText)["error"]) { document.getElementById("result").innerText=JSON.parse(xmlhttp.responseText)["message"]; } else { document.getElementById("result").innerText=" 長按保存圖像 "; document.getElementById("new_photo").aaaaaa="data:image/png;base64," + JSON.parse(xmlhttp.responseText)["message"]["picture"]; document.getElementById("new_photo").style="display: block;"; } } } var url=" http://service-8d3fi753-1256773370.bj.apigw.tencentcs.com/release/new_year_add_photo_decorate" var obj=document.getElementsByName("base"); var baseNum="1" for (var i=0; i < obj.length; i++) { console.log(obj[i].checked) if (obj[i].checked) { baseNum=obj[i].value; } } xmlhttp.open("POST", url, true); xmlhttp.setRequestHeader("Content-type", "application/json"); var postData={ pic: oFREvent.target.result, base: baseNum } xmlhttp.send(JSON.stringify(postData)); } } </script> <!-- 標準 mui.css--> <link rel="stylesheet" href="./css/mui.min.css"></head><body><h3 style="text-align: center; margin-top: 30px">2020 頭像 SHOW</h3><div class="mui-card"> <div class="mui-card-content"> <div class="mui-card-content-inner"> 第一步：選擇一個你喜歡的圖片 </div> </div> <div class="mui-content"> <ul class="mui-table-view mui-grid-view mui-grid-9"> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><label> <img aaaaaa="./base/1.png" width="100%"><input type="radio" name="base" value="1" checked></label></li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><label> <img aaaaaa="./base/2.png" width="100%"><input type="radio" name="base" value="2"></label></li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><label> <img aaaaaa="./base/11.png" width="100%"><input type="radio" name="base" value="11"></label></li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><label> <img aaaaaa="./base/4.png" width="100%"><input type="radio" name="base" value="4"></label></li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><label> <img aaaaaa="./base/5.png" width="100%"><input type="radio" name="base" value="5"></label></li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><label> <img aaaaaa="./base/6.png" width="100%"><input type="radio" name="base" value="6"></label></li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><label> <img aaaaaa="./base/12.png" width="100%"><input type="radio" name="base" value="12"></label></li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><label> <img aaaaaa="./base/8.png" width="100%"><input type="radio" name="base" value="8"></label></li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><label> <img aaaaaa="./base/3.png" width="100%"><input type="radio" name="base" value="3"></label></li> </ul> </div></div><div class="mui-card"> <div class="mui-card-content"> <div class="mui-card-content-inner"> 第二步：上傳一張你的頭像 </div> <div> <form> <input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id, 'photo')" style="display: none;" accept="image/*"> <center style="margin-bottom: 10px"> <input type="button" value=" 點擊此處上傳頭像 " onclick="clickChose()"/> <img id="photo" aaaaaa="" width="300px" , height="300px" style="display: none;"/> </center> </form> </div> </div></div><div class="mui-card"> <div class="mui-card-content"> <div class="mui-card-content-inner"> 第三步：點擊生成按鈕獲取新年頭像 </div> <div> <center style="margin-bottom: 10px"> <input type="button" value=" 生成新年頭像 " onclick="getNewPhoto()"/> <p id="result"></p> <img id="new_photo" aaaaaa="" width="300px" , height="300px" style="display: none;"/> </center> </div> </div></div><p style="text-align: center"> 本項目自豪的 <br> 通過 Serverless Framework<br> 搭建在騰訊云 SCF 上</p></body></html>完成之后：
復制代碼
new_year_add_photo_decorate: component: "@serverless/tencent-scf" inputs: name: myapi_new_year_add_photo_decorate codeUri: ./new_year_add_photo_decorate handler: index.main_handler runtime: Python3.6 region: ap-beijing description: 新年為頭像增加飾品 memorySize: 128 timeout: 5 events: - apigw: name: serverless parameters: serviceId: service-8d3fi753 environment: release endpoints: - path: /new_year_add_photo_decorate description: 新年為頭像增加飾品 method: POST enableCORS: true param: - name: pic position: BODY required: 'FALSE' type: string desc: 原始圖片 - name: base position: BODY required: 'FALSE' type: string desc: 飾品 ID myWebsite: component: '@serverless/tencent-website' inputs: code: src: ./new_year_add_photo_decorate/web index: index.html error: index.html region: ap-beijing bucketName: new-year-add-photo-decorate完成之后就可以實現(xiàn)頭像加裝飾的功能，效果如下：
直接加裝飾的方式其實是可以在前端實現(xiàn)的，但是既然用到了后端服務和云函數(shù)，那么我們不妨就將人工智能與 Serverless 架構(gòu)結(jié)果來實現(xiàn)一個增加裝飾的小工具。
實現(xiàn)這一功能的主要做法就是通過人工智能算法 (此處是通過 Dlib 實現(xiàn)) 進行人臉檢測：
復制代碼
print("dlib 人臉關鍵點檢測器, 正臉檢測 ")predictorPath="shape_predictor_5_face_landmarks.dat"predictor=dlib.shape_predictor(predictorPath)detector=dlib.get_frontal_face_detector()dets=detector(img, 1)此處的做法是只檢測一張臉，檢測到即進行返回：
復制代碼
for d in dets: x, y, w, h=d.left(), d.top(), d.right() - d.left(), d.bottom() - d.top() print(" 關鍵點檢測，5 個關鍵點 ") shape=predictor(img, d) print(" 選取左右眼眼角的點 ") point1=shape.part(0) point2=shape.part(2) print(" 求兩點中心 ") eyes_center=((point1.x + point2.x) // 2, (point1.y + point2.y) // 2) print(" 根據(jù)人臉大小調(diào)整帽子大小 ") factor=1.5 resizedHatH=int(round(rgbHat.shape[0] * w / rgbHat.shape[1] * factor)) resizedHatW=int(round(rgbHat.shape[1] * w / rgbHat.shape[1] * factor)) if resizedHatH > y: resizedHatH=y - 1 print(" 根據(jù)人臉大小調(diào)整帽子大小 ") resizedHat=cv2.resize(rgbHat, (resizedHatW, resizedHatH)) print(" 用 alpha 通道作為 mask") mask=cv2.resize(a, (resizedHatW, resizedHatH)) maskInv=cv2.bitwise_not(mask) print(" 帽子相對與人臉框上線的偏移量 ") dh=0 bgRoi=img[y + dh - resizedHatH:y + dh, (eyes_center[0] - resizedHatW // 3):(eyes_center[0] + resizedHatW // 3 * 2)] print(" 原圖 ROI 中提取放帽子的區(qū)域 ") bgRoi=bgRoi.astype(float) maskInv=cv2.merge((maskInv, maskInv, maskInv)) alpha=maskInv.astype(float) / 255 print(" 相乘之前保證兩者大小一致（可能會由于四舍五入原因不一致）") alpha=cv2.resize(alpha, (bgRoi.shape[1], bgRoi.shape[0])) bg=cv2.multiply(alpha, bgRoi) bg=bg.astype('uint8') print(" 提取帽子區(qū)域 ") hat=cv2.bitwise_and(resizedHat, cv2.bitwise_not(maskInv)) print(" 相加之前保證兩者大小一致（可能會由于四舍五入原因不一致）") hat=cv2.resize(hat, (bgRoi.shape[1], bgRoi.shape[0])) print(" 兩個 ROI 區(qū)域相加 ") addHat=cv2.add(bg, hat) print(" 把添加好帽子的區(qū)域放回原圖 ") img[y + dh - resizedHatH:y + dh, (eyes_center[0] - resizedHatW // 3):(eyes_center[0] + resizedHatW // 3 * 2)]=addHat return img在 Serverless 架構(gòu)下的完整代碼：
復制代碼
import cv2import dlibimport base64import json def addHat(img, hat_img): print(" 分離 rgba 通道，合成 rgb 三通道帽子圖，a 通道后面做 mask 用 ") r, g, b, a=cv2.split(hat_img) rgbHat=cv2.merge((r, g, b)) print("dlib 人臉關鍵點檢測器, 正臉檢測 ") predictorPath="shape_predictor_5_face_landmarks.dat" predictor=dlib.shape_predictor(predictorPath) detector=dlib.get_frontal_face_detector() dets=detector(img, 1) print(" 如果檢測到人臉 ") if len(dets) > 0: for d in dets: x, y, w, h=d.left(), d.top(), d.right() - d.left(), d.bottom() - d.top() print(" 關鍵點檢測，5 個關鍵點 ") shape=predictor(img, d) print(" 選取左右眼眼角的點 ") point1=shape.part(0) point2=shape.part(2) print(" 求兩點中心 ") eyes_center=((point1.x + point2.x) // 2, (point1.y + point2.y) // 2) print(" 根據(jù)人臉大小調(diào)整帽子大小 ") factor=1.5 resizedHatH=int(round(rgbHat.shape[0] * w / rgbHat.shape[1] * factor)) resizedHatW=int(round(rgbHat.shape[1] * w / rgbHat.shape[1] * factor)) if resizedHatH > y: resizedHatH=y - 1 print(" 根據(jù)人臉大小調(diào)整帽子大小 ") resizedHat=cv2.resize(rgbHat, (resizedHatW, resizedHatH)) print(" 用 alpha 通道作為 mask") mask=cv2.resize(a, (resizedHatW, resizedHatH)) maskInv=cv2.bitwise_not(mask) print(" 帽子相對與人臉框上線的偏移量 ") dh=0 bgRoi=img[y + dh - resizedHatH:y + dh, (eyes_center[0] - resizedHatW // 3):(eyes_center[0] + resizedHatW // 3 * 2)] print(" 原圖 ROI 中提取放帽子的區(qū)域 ") bgRoi=bgRoi.astype(float) maskInv=cv2.merge((maskInv, maskInv, maskInv)) alpha=maskInv.astype(float) / 255 print(" 相乘之前保證兩者大小一致（可能會由于四舍五入原因不一致）") alpha=cv2.resize(alpha, (bgRoi.shape[1], bgRoi.shape[0])) bg=cv2.multiply(alpha, bgRoi) bg=bg.astype('uint8') print(" 提取帽子區(qū)域 ") hat=cv2.bitwise_and(resizedHat, cv2.bitwise_not(maskInv)) print(" 相加之前保證兩者大小一致（可能會由于四舍五入原因不一致）") hat=cv2.resize(hat, (bgRoi.shape[1], bgRoi.shape[0])) print(" 兩個 ROI 區(qū)域相加 ") addHat=cv2.add(bg, hat) print(" 把添加好帽子的區(qū)域放回原圖 ") img[y + dh - resizedHatH:y + dh, (eyes_center[0] - resizedHatW // 3):(eyes_center[0] + resizedHatW // 3 * 2)]=addHat return img def main_handler(event, context): try: print(" 將接收到的 base64 圖像轉(zhuǎn)為 pic") imgData=base64.b64decode(json.loads(event["body"])["pic"]) with open('/tmp/picture.png', 'wb') as f: f.write(imgData) print(" 讀取帽子素材以及用戶頭像 ") hatImg=cv2.imread("hat.png", -1) userImg=cv2.imread("/tmp/picture.png") output=addHat(userImg, hatImg) cv2.imwrite("/tmp/output.jpg", output) print(" 讀取頭像進行返回給用戶，以 Base64 返回 ") with open("/tmp/output.jpg", "rb") as f: base64Data=str(base64.b64encode(f.read()), encoding='utf-8') return { "picture": base64Data } except Exception as e: return { "error": str(e) }這樣，我們就完成了通過用戶上傳人物頭像進行增加圣誕帽的功能。
傳統(tǒng)情況下，如果我們要做一個增加頭像裝飾的小工具，可能需要一個服務器，哪怕沒有人使用，也必須有一臺服務器苦苦支撐，這樣導致有時僅僅是一個 Demo，也需要無時無刻的支出成本。但在 Serverless 架構(gòu)下，其彈性伸縮特點讓我們不懼怕高并發(fā)，其按量付費模式讓我們不懼怕成本支出。
關注我并轉(zhuǎn)發(fā)此篇文章，私信我“領取資料”，即可免費獲得InfoQ價值4999元迷你書！
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
