圖片識別加速，從 10 秒變爲 1 秒，是怎麼作到的呢？ | 小程序雲開發

滬江 CCtalk 前端開發工程師，Taro 框架的 issue 維護志願者，主要側重於前端 UI 編寫和團隊文檔建設。本文講解的是個人快快戴口罩小程序中核心邏輯，如何給人臉戴上口罩，也就是使用騰訊雲的人臉識別中的五官分析來實現的。

基本步驟

1. 用戶選擇圖片
2. 圖片裁切，藉助canvas 來實現
3. canvas 圖片轉換爲小程序的圖片
4. 圖片轉換爲 base64 數據
5. 上傳 base64 到騰訊雲後進行五官識別

先來 2 個小問題

問題 1：第一個要處理的問題，是從小程序側直接上傳仍是傳給我的服務器或雲端後再轉發呢？小程序側直接上傳

• 咱們就須要在微信公衆平臺上配置多個騰訊雲的域名，好比 iai.tencentcloudapi.com、 tiia.tencentcloudapi.com 等
• 還須要依賴用戶那邊的網絡速度，還有小程序側請求仍是挺容易失敗的，會讓小程序的體驗大打折扣
• 若是一個功能上有多個網絡請求，好比人臉識別、五官分析、智能美顏，那小程序側去請求，直接就消耗了用戶大量流量啦。

傳給我的服務器或雲端後再轉發

• 無需在微信公衆平臺上配置多個騰訊雲的域名
• 能夠合併多個網絡請求，依託我的服務器或雲端穩定的網絡環境作到更快速的請求響應

問題 2：在我的服務器和小程序雲開發上，我是如何選擇的？最近比較火的概念就是 Serverless，簡單來講就是，不借助運維手段就能夠直接調用服務器上的數據庫、文件以及其餘資源。而我在此次小程序開發中的我的服務器當中作了以下設置

1. 購買了一個域名並備案，設置了二級域名，爲二級域名設置了 HTTP SSL 證書
2. 購買了一個騰訊雲的雲服務器，在上面安裝了 nginx、nodejs 等基礎軟件
3. 在啓動了基於 nodejs 的 express.js 寫的簡單的 Rest API 服務後，藉助於 nginx 未來自二級域名的請求轉發到 node 站點上

先說花銷上，域名每一年須要幾十元、服務器也須要幾十元或幾百元不等，網站備案也須要各類限制，好比在上海的話就須要戶口或居住證，在江蘇的話就須要江蘇的手機號碼。再說運維上，我不只要設置上述的基礎功能，還要考慮設置出測試環境、正式環境，還要考慮服務的穩定性。這就是我爲什麼選擇小程序雲·開發的緣由了。由於免費、高效、穩定。雲開發提供了幾大基礎能力支持：

• 雲函數——在雲端運行的代碼，微信私有協議自然鑑權，開發者只需編寫自身業務邏輯代碼
• 數據庫——一個既可在小程序前端操做，也能在雲函數中讀寫的 JSON 數據庫
• 存儲——在小程序前端直接上傳/下載雲端文件，在雲開發控制檯可視化管理
• 雲調用——原生微信服務集成 基於雲函數免鑑權使用小程序開放接口的能力，包括服務端調用、獲取開放數據等能力

在小程序側免費開通雲開發，配額以下：

對於新手或實驗性項目來講，這個配合足夠用。若是想升級，小程序還提供了很是完整的升級方案。具體能夠在下面這個連接上進行查看。https://developers.weixin.qq....？那麼最爲吸引我使用小程序雲開發的理由是啥呢？以 nodejs 爲載體的雲開發環境能夠高度自定義。

• wx-server-sdk來調用小程序開放接口
• tcb-admin-node讓你能夠在服務端（如騰訊云云函數或 CVM 等）使用 Node.js 服務訪問 TCB 的的服務。
• tencentcloud-sdk-nodejs，調用騰訊雲的諸多服務，如人臉識別、五官分析等等
• 甚至說，上面這些均可以本身改代碼，自定義功能實現，好比我最開始使用五官分析時，須要更換騰訊雲的簽名方法，而tencentcloud-sdk-nodejs的 npm 版還沒有支持，我就下載代碼下載，本身改好再用。

正文開始

初版 VS 第四版

初版：我的服務器版本，圖片大約爲 1.2~2M第四版：雲開發版本，以雲存儲 fileID 爲載體

使用 canvas 的canvasToTempFilePath 進行圖片壓縮，格式爲 jpg，質量爲 0.8，在安卓手機上圖片會從 1.2-2MB 降爲 150KB 如下，該圖也是本地顯示的原圖。使用小程序的compressImage（質量 0.1）來壓縮圖片，在 iPhone 上效果良好，在安卓系統上效果不大，但這裏咱們也可使用。即便質量很低，足夠圖片審覈、五官分析所用的。使用臨時上傳圖片爲載體、以 fileID 爲雲函數調用的標誌時，雲函數調用的體積較小，雲存儲的上傳下載都很是穩定。圖片安全 和五官分析能夠同時請求，但使用 Promise.allSettled() 同時來請求。這裏解決了三個問題：

• 雲函數調用有時長限制，須要修改 app.json 的 timeout，不然雲函數調用會直接報錯，即便後續雲開發環境有數據返回。
• 圖片審覈大小限制 500KB
• 五官分析在 base64 數據大於 1MB 時須要更換籤名方法爲TC3-HMAC-SHA256。

那麼效果如何呢？總使用時間大約爲 5 秒，其中請求時間約爲 3 秒。

備註：
用時爲雲開發的本地開發模式測得，雲端調用速度更快 總使用時間：從圖片壓縮開始，通過調用雲函數，雲函數識別出五官信息，返回後小程序處理五官信息，渲染口罩效果的用時。
請求時間：從小程序調用雲函，雲函數識別出五官信息、返回到小程序側的用時。

第四版 VS 第五版

第四版：雲開發版本，以雲存儲 fileID 爲中間載體第五版：雲開發版本，以 base64 數據直接請求

不使用雲存儲做爲傳遞載體，而是使用圖片壓縮後的不大於 150KB 大小的 base64 數據直接請求，減小了小程序側圖片上傳、雲開發環境中的圖片下載兩個異步操做的步驟。小程序側也有 ArrayBuffer 數據，但在本地開發過程當中發現，只要其大小超過 50KB（猜的），雲函數調用就會直接報錯。

PS：我這個小程序的圖片識別只是暫時的請求數據，並未須要將圖片上傳到雲存儲，讓用戶下次還能看到這個圖片。

那麼效果如何呢？總使用時間大約爲 3 秒之內，其中請求時間約爲 0.8-1.2 秒。

結論

• 本地識別，須要原圖
• 五官識別輪廓就行，圖片審覈用低質量圖片便可
• 圖片壓縮，想辦法壓縮到能用的最低
• 異步請求的數量要減小，能夠直接傳遞最終數據，但數據要小

小程序五個版本的細節

• 初版：我的服務器版本

  • 總使用時間大約爲 13 秒，請求花了 10 秒
  • 須要本地開發後，git 上傳代碼，服務器上安裝 nodejs 依賴，pm2 啓動，很麻煩，
  • 未區分測試環境和正式環境，要是實際使用，必須得再配置，每次使用也很麻煩。
  • 在我的服務上用 nginx 轉發，再用 nodejs 接收
  • nginx 默認限制大小，因此得改大小
  • 調用騰訊雲服務，1M 以上須要改簽名方法
  • canvas 轉換爲圖片，再轉換爲 base64 編碼，大小一般爲 1.2-2M
  • 向我的服務器發送 API 請求，數據爲 base64 編碼
  • 小程序
  • 我的服務器
  • 效果

• 第二版，雲開發，直接上傳 base64

  • 總使用時間大約爲 11 秒
  • 請求時間長，本地開發很容易失敗，由於 timeout 得調整大於 10 秒，我改成 20 秒
  • 開發體驗比我的服務器好了不少，基本上在微信開發者工具與 Visual Code 上切換便可
  • 五官分析，使用 base64 編碼。因爲此時大於 1M，須要更換籤名方法
  • canvas 轉換爲圖片，再轉換爲 base64 編碼，大小一般爲 1.2-2M
  • 調用雲函數，數據爲 base64 編碼
  • 小程序
  • 雲開發雲函數
  • 效果

• 第三版，雲開發基礎上，改用雲存儲轉發

  • 總使用時間大約爲 8 秒
  • 使用 fileID 存儲，以及向雲函數發送 fileID，安全性更高，由於雲開發的存儲須要騰訊雲權限
  • 接收五官信息
  • 利用 fileID 刪除雲存儲上的圖片
  • 利用 fileID 下載圖片內容，轉換爲 base 格式
  • 五官分析，使用 base64 編碼。因爲此時大於 1M，須要更換籤名方法
  • canvas 轉化爲圖片，
  • 雲調用 uploadFile 上傳雲存儲，返回 fileID
  • 調用雲函數，數據爲 fileID
  • 小程序
  • 雲開發雲函數
  • 小程序
  • 效果

• 第四版：大幅度壓縮圖片，雲存儲 fileID 爲中間載體

  • 總使用時間大約爲 6 秒，其中請求時間約爲 4 秒
  • 加入 canvas 圖片壓縮，效果很是明顯
  • 微信圖片壓縮，安卓上效果不明顯
  • 設置五官信息，若圖片審覈失敗，就報錯
  • 利用 fileID 刪除雲存儲上的圖片
  • 使用 fileID 從雲開發的存儲裏下載文件
  • Promise.allSettled 異步全返回
  • 圖片審覈-使用 Buffer
  • 五官分析-使用 base64 格式
  • canvas 轉換爲圖片，注意要圖片壓縮，設置格式爲 jpg，質量爲 0.8
  • 小程序，圖片壓縮，安卓上效果不大？但此時圖片大小約在 150k 如下
  • 上傳文件到雲開發環境，得到 fileID
  • 調用雲函數，數據爲 fileID
  • 小程序
  • 雲開發雲函數
  • 小程序
  • 效果

• 第五版本

  • 總使用時間約爲 2-3 秒，請求時間在 1.2 秒之內，一般爲 0.8 秒
  • 比第四版相比，省去圖片上傳下載的過程，節約了請求時間，但相應的，安全性不那麼高
  • 優化方案爲，base64 數據能夠加密。
  • 設置五官信息，若圖片審覈失敗，就報錯
  • Promise.allSettled 異步全返回
  • 圖片審覈-使用 Buffer
  • 五官分析-使用 base64 格式
  • canvas 轉換爲圖片，注意要圖片壓縮，設置格式爲 jpg，質量爲 0.8
  • 小程序，圖片壓縮質量爲 0.1，安卓上效果不大
  • 圖片轉換爲 base64 格式，大小小於 150k
  • 調用雲函數，數據爲 base64 格式
  • 小程序
  • 雲開發雲函數
  • 小程序
  • 效果

文章相關內容：

珍愛生命，從我作起，快點戴上口罩，給你們介紹我開源的 Taro + 騰訊雲開發 小程序「快快戴口罩」它能夠智能識別人臉，給集體照戴上口罩。(*￣︶￣)

採用 Taro 跨端框架，採用騰訊雲開發模式，採用基於騰訊雲的五官分析的人臉識別，實現了自動爲頭像戴上口罩的功能。源碼地址：快快戴口罩源碼主要功能

• 智能識別人臉，進行五官定位
• 支持多人識別
• 支持添加加油圖片

掃碼預覽微信搜一搜：快快戴口罩

小程序截圖