云開發---uniapp云開發云函數練習---整合百度ai圖像識別SDK

上篇文章https://bbs.huaweicloud.com/blogs/256599我們大致了解了下云函數

這篇文章帶大家使用云函數來整合百度ai圖像識別SDK

也算是云函數的一個小練習 最好看完上個文章再來看這個 就當練習

兩個文檔需要看

uniCloud https://uniapp.dcloud.io/uniCloud/cf-common

百度ai圖像識別SDK文檔 https://cloud.baidu.com/doc/IMAGERECOGNITION/s/bk3bcxkdg

視頻

已經放置b站

https://www.bilibili.com/video/BV1pU4y1W7c2

將sdk制作成公共模塊

創建common目錄

如果你沒有cloudfunctions 參考上篇文章

鼠標右鍵點擊這個文件夾 新建common目錄

新建公共模塊

右鍵點擊common新建公共模塊

我在這里起名為hello

創建完成

npm導入百度aip

這個時候 我們可以控制臺進入 hello目錄

根據百度ai開放平臺圖像識別SDK文檔

https://cloud.baidu.com/doc/IMAGERECOGNITION/s/bk3bcxkdg

可得 我們需要 npm install baidu-aip-sdk來安裝依賴

在hello目錄下安裝 執行npm install baidu-aip-sdk 建議使用cmd

安裝完成

再次封裝

uniapp文檔說 需要使用module.exports導出模塊

我們在 /hello/index.js來編寫

根據百度ai文檔 node引入如下

我們結合下

var AipImageClassifyClient = require("baidu-aip-sdk").imageClassify; // 設置APPID/AK/SK var APP_ID = "你的 App ID"; var API_KEY = "你的 Api Key"; var SECRET_KEY = "你的 Secret Key"; // 新建一個對象，建議只保存一個對象調用服務接口 var client = new AipImageClassifyClient(APP_ID, API_KEY, SECRET_KEY); module.exports = client

公共模塊完成 右鍵點擊hello文件夾 上傳公共模塊

編寫云函數

按照上篇文章 我們右鍵單擊cloudfunctons新建云函數 這里我起名為usehello

右鍵點擊usehello 選擇管理公共模塊依賴 選擇hello 更新依賴

代碼

'use strict'; let client = require('hello') exports.main = async (event, context) => { return new Promise(function(resolve){ client.advancedGeneral(event.bas64).then(function(result) { resolve(result) }).catch(function(err) { // 如果發生網絡錯誤 console.log(err); return "error" }); }) };

代碼解釋

event.bas64為接收的base64數據 具體往下看前端測試調用云函數

首先 我們導入公共模塊的hello導出的client

在 主函數中編寫 這里使用通用物體識別 根據文檔

這里我們直接給云函數傳送base64數據 當然等會會講 圖片也壓縮了(用到了插件)

返回一個Promise對象 如果不使用Promise可以使用回調 但是Promise方便

我們把識別的結果拋出

云函數編寫完成 右鍵點擊hello 更新依賴本模塊的云函數

小踩坑

如果出現 上傳公共模塊后 云函數還報錯說無依賴的公共模塊 需要你上傳

修改 云函數目錄下的package.json

將

"dependencies": { "hello": "file:..\\common\\hello" }

改為

"dependencies": { "hello": "file:../common/hello" }

操作完成即可

前端測試

我們直接使用 index

這里給logo圖像加了個點擊事件 testOne

使用了別人的壓縮插件來壓縮圖像 插件地址https://ext.dcloud.net.cn/plugin?id=2316

當然如果不想使用別人的壓縮插件 可以 通過如下步驟壓縮

圖片畫到canvas上 自行壓縮尺寸 最后生成 base64數據

頁面

功能

說明

首先我們使用了uni.chooseImage選擇一個圖片 然后通過插件來壓縮圖片

然后將圖片轉換為base64數據 并調用云函數

圖片轉base64

請求壓縮圖像得到的臨時圖像地址 請求得到arraybuffer 通過uni.arrayBufferToBase64轉化為base64

uni.request({ url:resp, method:'GET', responseType: 'arraybuffer', success:function(res){ let base64s = uni.arrayBufferToBase64(res.data); } }

調用云函數

可以參考文檔 https://uniapp.dcloud.io/uniCloud/cf-functions?id=clientcallfunction

我們調用寫的usehello云函數 傳送base64數據 key:value格式傳送數據bas64:base64s

uniCloud.callFunction({ name:'usehello', data: {bas64:base64s} }).then(res=>{ console.log(res.result.result) })

得到拋出的結果

效果如下

完整功能代碼

大學之道亦在自身，努力學習，熱血青春

AI API/SDK 圖像處理

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。