云開發CloudBase是云開發團隊為開發者提供的一站式云服務，旨在降低開發者使用云服務的門檻，助力開發者快速開發應用。在具體的開發過程中，云開發提供了許多實用的擴展能力，包含圖像標簽、圖像安全審核、圖像處理、圖片盲水印等。本文就以人臉識別小程序為例介紹一些云開發擴展能力的應用。

使用方法簡述

完整文檔見：

https://docs.cloudbase.net/extension/introduce.html

1、打開?云開發擴展控制臺；

2、選擇希望安裝的擴展；

3、單擊【安裝】，進行擴展程序的安裝；

4、等待擴展程序安裝完成即可使用。

在云函數中或 客戶端安裝@cloudbase/extension-ci，并使用對應的 tcb sdk 來調用擴展(如?@cloudbase/js-sdk或@cloudbase/node-sdk)

PS：可將云函數超時時間調整為 10 秒以上，因為運行擴展和騰訊云特色人工智能服務(如人臉識別)可能會超過默認的 3 秒超時時間。

擴展能力與數據萬象的關系

圖像類的擴展能力，需先上傳圖片到云存儲，再調用擴展能力(使用了數據萬象)處理圖片，然后將圖片上傳到云存儲。數據萬象(Cloud Infinite，CI)是騰訊云為客戶提供的專業一體化的圖片解決方案，涵蓋圖片上傳、下載、存儲、處理、識別等功能，將 QQ 空間相冊積累的十年圖片服務運作經驗開放給開發者。目前有圖片處理、原圖保護、跨域訪問設置、樣式預設等功能。// 圖像處理示例代碼tcb.init({ env: "您的環境ID"});tcb.registerExtension(extCi);async function process() { try { const opts = { rules: [ { // 處理結果的文件路徑，如以’/’開頭，則存入指定文件夾中，否則，存入原圖文件存儲的同目錄 fileid: "/image_process/demo.jpeg", rule: "imageView2/format/png" // 處理樣式參數，與下載時處理圖像在url拼接的參數一致 } ] }; const res = await tcb.invokeExtension("CloudInfinite", { action: "ImageProcess", cloudPath: "demo.jpeg", // 存儲圖像的絕對路徑，與tcb.uploadFile中一致 fileContent, // 該字段可選，文件內容：Uint8Array|Buffer。有值，表示上傳時處理圖像；為空，則處理已經上傳的圖像 operations: opts }); console.log(JSON.stringify(res.data, null, 4)); } catch (err) { console.log(JSON.stringify(err, null, 4)); }}

通過上述代碼，我們可以得出以下簡略步驟：

1、圖片需要上傳到云存儲上，獲取?fileID

2、從?fileID?中截取出?cloudPath，即存儲圖像的絕對路徑

3、調用擴展能力(如上面代碼中的圖像處理)，根據設置的選項(operations: {rules: []})來完成對圖像的處理

4、將處理后的圖片保存到云存儲上

那么問題來了，如果我只想將圖片裁剪后展示到小程序上而不想將圖片上傳到云存儲上該如何操作呢？1、通過 fileID 獲取圖片的臨時地址(需要安裝圖象處理擴展，并開啟所有人可讀、創建者讀寫權限)2、通過在圖片鏈接后面拼接 rule 即可得到所需要的圖片。rule 能夠實現對圖片按順序進行多種處理。用戶可以通過管道操作符將多個處理參數分隔開，從而實現在一次訪問中按順序對圖片進行不同處理。目前支持大小在 20M 以內、長寬小于 9999 像素的圖片處理。目前最多支持三層管道。總之，擴展能力對應的使用技巧如下：

借助圖像安全審核、圖像處理來完成人臉識別的流程。圖像安全審核在下文中會講解，這里先講解人臉智能裁剪和人臉識別。完整的時序圖如下：

人臉智能裁剪

將圖像進行縮放及裁剪，有兩種方法進行。一種是小程序側借助小程序圖片裁剪插件(如 image-cropper)讓用戶自己手動裁剪，而另一種就是借助數據萬象中裁剪[3]來自動完成圖片裁剪。如，原圖為 2160x2880 的 1Mb 大小的圖片，而在小程序顯示時只需要寬高為 600x600 的圖片即可(圖片大小會降為 70Kb)。裁剪效果如下圖：參考代碼如下：// 獲取圖片臨時鏈接const getImageUrl = async (fileID) => { const { fileList } = await tcb.getTempFileURL({ fileList: [fileID] }) return fileList[0].tempFileURL}let originImageUrl = await getImageUrl(fileID)let rule = `imageMogr2/thumbnail/!${width}x${height}r|imageMogr2/scrop/${width}x${height}/`return cutImageUrl = originImageUrl + '?' + rule

圖片縮放及裁剪的核心就是rule，這里我執行了兩項操作

1、/thumbnail/!600x600r/，將圖片縮放為寬高中的小邊為 600px(限定縮略圖的寬度和高度的最小值分別為 Width 和 Height，進行等比縮放)2、/scrop/600x600，將圖片的人臉部分裁剪出來(基于圖片中的人臉位置進行縮放裁剪。目標圖片的寬度為 Width、高度為 Height)

如果人臉智能裁剪不奏效的話，也可以用/crop/600x600/center，將圖片居中裁剪。

人臉識別

騰訊云的人臉識別[4]服務支持使用圖片鏈接(Url)或者圖片 Base64 數據(Image)來完成人臉識別。這里，我通過 fileID 獲取圖片臨時鏈接，以提供給人臉識別使用。// 人臉識別示例代碼const detectFace = (Image) => { let faceReq = new models.DetectFaceRequest() // 支持圖片鏈接或圖片base64數據 let query_string = JSON.stringify(Image.includes('http') ? { Url: Image, // 這里是圖片鏈接，以http開頭 MaxFaceNum: 5, NeedFaceAttributes: 1 } : { Image, // 這里是圖片Base64數據 MaxFaceNum: 5, NeedFaceAttributes: 1 }) // 傳入json參數 faceReq.from_json_string(query_string); // 進行人臉識別 return new Promise((resolve, reject) => { // 通過client對象調用想要訪問的接口，需要傳入請求對象以及響應回調函數 client.DetectFace(faceReq, function (error, response) { // 請求異常返回，打印異常信息 if (error) { const { code = '' } = error console.log('code :', code); resolve({ data: {}, time: new Date(), status: -10086, message: 'DetectFace ' + status.DETECT_CODE[code] || code || '圖片解析失敗' }) return } // 請求正常返回，打印response對象 resolve({ data: response, time: new Date(), status: 0, message: '' }) }) });}

完整的使用示例，請參照 https://github.com/hi-our/hi-face/blob/1.x-stable/cloud/functions/detect-face/index.js

注意點接口文檔：最多返回面積最大的 5 張人臉屬性信息，超過 5 張人臉(第 6 張及以后的人臉)的 FaceAttributesInfo 不具備參考意義。

• MaxFaceNum：最大識別人數建議限定為 5 個
• NeedFaceAttributes：設置為 1 時，才會返回人臉屬性值(魅力值)

圖像安全審核

圖像安全審核提供鑒黃、鑒暴恐等多種類型的敏感內容審核服務，有效識別違禁圖片，規避違規風險。這里對比了云開發擴展能力的圖片安全審核與開放能力的圖片安全審核的差異：圖片安全審核

接口文檔：

https://docs.cloudbase.net/extension/abilities/image-examination.html

使用步驟：

1、上傳圖片到云存儲2、云函數調用圖片安全審核，來自云開發擴展能力進行校驗3、如果是違規圖片，可能還需要從云存儲上刪除，以免占用不必要的空間開放能力 imgSecCheck

接口文檔：

https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/sec-check/security.imgSecCheck.html在實際使用中發現的大問題，圖片 Buffer 大小超過 100k，可能就報圖片太大的錯誤了。有的小伙伴說，10k 都可能會報錯。

使用方法

// 圖片安全審核，來自云開發擴展能力async function demo() { try { const opts = { type: ["porn", "terrorist", "politics"] } const res = await tcb.invokeExtension('CloudInfinite',{ action:'DetectType', cloudPath: "ab.png", // 需要分析的圖像的絕對路徑，與tcb.uploadFile中一致 operations: opts }) console.log(JSON.stringify(res.data, null, 4)); } catch (err) { console.log(JSON.stringify(err, null, 4)); }}

完整的使用示例，請參照：

https://github.com/hi-our/hi-face/blob/1.x-stable/cloud/functions/image-safe-check/index.js多圖裁剪多圖片裁剪，我目前用到的方案是直接通過拼接圖片路徑的方式。1、通過?fileID?獲取圖片臨時鏈接?imageUrl2、在imageUrl后拼接參數if (imageUrl) { let prefex = imageUrl.includes('?') ? '|' : '?' const list = ruleList.map(item => { const { width, height, x, y } = item let let rule = prefex + 'imageMogr2/cut/' + width + 'x' + height + 'x' + x + "x" + y return { fileImageUrl: imageUrl + rule } })}圖片主色調獲取在圖像處理中其實有一項十分好用的功能，那就是獲取圖片主色調，這個能力是基于云存儲的數據萬象來做的。其實用方法為將云存儲的圖片鏈接后拼接 ?imageAve。而我這里還打算將顏色轉換放在里面，因為可能需要的顏色是帶透明度的 RGBA 顏色。exports.main = async (event) => { const { fileID = '', opacity = 1, colorType = 'default' } = event console.log('fileID :', fileID); if (fileID) { try { const imgUrl = await getImageUrl(fileID) // 云存儲的圖片臨時鏈接拼接`?imageAve` const res = await fetch.get(imgUrl + '?imageAve') const { RGB } = getResCode(res) // 根據所需顏色的透明度(opacity)和類型(colorType)來返回對應的顏色值 const colorHex = '#' + RGB.substring(2) const colorRgbaObj = hexToRgba(colorHex, opacity) const colorRgba = colorRgbaObj.rgba const colorRgb = `rgb(${colorRgbaObj.red}, ${colorRgbaObj.green}, ${colorRgbaObj.blue})` // 支持多種顏色獲取方式 let mainColor = opacity === 1 ? colorHex : colorRgba if (colorType === 'hex') { mainColor = colorHex } else if (colorType === 'rgb') { mainColor = colorRgb } return { data: { mainColor }, time: new Date(), status: 0, message: '' } } catch (error) { return { data: {}, time: new Date(), status: -10087, message: JSON.stringify(error) } } } return { data: {}, time: new Date(), status: -10086, message: '請設置 fileID' }}完整的使用示例，請參照：https://github.com/hi-our/hi-face/blob/1.x-stable/cloud/functions/get-main-color/index.js

圖像標簽

圖像標簽對云存儲中存量數據的圖片標簽識別，返回圖片中置信度較高的主題標簽，幫助開發者分析圖像。let imgID = fileID.replace('cloud://', '')let index = let .indexOf('/')let cloudPath = imgID.substr(index)const res = await tcb.invokeExtension("CloudInfinite", { action: "DetectLabel", cloudPath: cloudPath // 需要分析的圖像的絕對路徑，與tcb.uploadFile中一致})const { Labels } = getResCode(res)// 兼容只有標簽時為對象的情況const tmpLabels = Labels.length > 1 ? Labels : [Labels]const list = tmpLabels.map(item => ({ confidence: item.Confidence, name: item.Name}))完整的使用示例，請參照：https://github.com/hi-our/hi-face/blob/1.x-stable/cloud/functions/detect-image-label/index.js

作者簡介

本文作者：盛瀚欽，滬江 CCtalk 前端開發工程師，騰訊云云開發布道師，Taro 社區共建者。參考資料

[1]?擴展能力:?

https://docs.cloudbase.net/extension/introduce.html

[2] 云開發擴展控制臺:?https://console.cloud.tencent.com/tcb/add

[3] 裁剪:?

https://cloud.tencent.com/document/product/460/36541

[4] 人臉識別:

https://cloud.tencent.com/document/api/867/32800

---

歡迎在下方評論區留言或在微信開放社區?進入云開發專區與我們交流。

?

?更多精彩

點擊下方圖片即可了解

△?騰訊云十周年慶·云開發重磅回饋

△?云數據庫已支持回檔到最長14天內的任意時刻

---

---

由于公眾號推送規則更改，請多多分享、點贊和“在看”，以及時獲取云開發Cloudbase的最新動態。

? ? ? 點擊在看讓更多人發現精彩

總結

以上是生活随笔為你收集整理的base64 不一致_这几项超好用的云开发扩展能力，别说你还不知道！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。