uniCloud基礎(chǔ)練習(xí)---云函數(shù)練習(xí)---整合百度ai圖像識別SDK

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

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

也算是云函數(shù)的一個小練習(xí) 最好看完上個文章再來看這個 就當(dāng)練習(xí)

兩個文檔需要看

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

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

uniapp云函數(shù)整合百度ai圖像識別SDK

視頻教程https://www.bilibili.com/video/BV1pU4y1W7c2

云開發(fā)云函數(shù)練習(xí)—整合百度ai開放平臺api

將sdk制作成公共模塊

創(chuàng)建common目錄

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

鼠標(biāo)右鍵點(diǎn)擊這個文件夾 新建common目錄

新建公共模塊

右鍵點(diǎn)擊common新建公共模塊

我在這里起名為hello

創(chuàng)建完成

npm導(dǎo)入百度aip

這個時候 我們可以控制臺進(jìn)入 hello目錄

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

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

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

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

安裝完成

再次封裝

uniapp文檔說 需要使用module.exports導(dǎo)出模塊

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

根據(jù)百度ai文檔 node引入如下

我們結(jié)合下

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

公共模塊完成 右鍵點(diǎn)擊hello文件夾 上傳公共模塊

編寫云函數(shù)

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

右鍵點(diǎn)擊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) { // 如果發(fā)生網(wǎng)絡(luò)錯誤 console.log(err); return "error" }); }) };

代碼解釋

event.bas64為接收的base64數(shù)據(jù) 具體往下看前端測試調(diào)用云函數(shù)

首先 我們導(dǎo)入公共模塊的hello導(dǎo)出的client

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

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

返回一個Promise對象 如果不使用Promise可以使用回調(diào) 但是Promise方便

我們把識別的結(jié)果拋出

云函數(shù)編寫完成 右鍵點(diǎn)擊hello 更新依賴本模塊的云函數(shù)

小踩坑

如果出現(xiàn) 上傳公共模塊后 云函數(shù)還報錯說無依賴的公共模塊 需要你上傳

修改 云函數(shù)目錄下的package.json

將

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

改為

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

操作完成即可

前端測試

我們直接使用 index

這里給logo圖像加了個點(diǎn)擊事件 testOne

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

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

圖片畫到canvas上 自行壓縮尺寸 最后生成 base64數(shù)據(jù)

頁面

功能

說明

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

然后將圖片轉(zhuǎn)換為base64數(shù)據(jù) 并調(diào)用云函數(shù)

圖片轉(zhuǎn)base64

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

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

調(diào)用云函數(shù)

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

我們調(diào)用寫的usehello云函數(shù) 傳送base64數(shù)據(jù) key:value格式傳送數(shù)據(jù)bas64:base64s

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

得到拋出的結(jié)果

效果如下

完整功能代碼

大學(xué)之道亦在自身，努力學(xué)習(xí)，熱血青春

AI API/SDK 圖像處理

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。