上篇文章https://blog.csdn.net/qq_42027681/article/details/113746528我們大致了解了下云函式
這篇文章帶大家使用云函式來整合百度ai影像識別SDK
也算是云函式的一個小練習 最好看完上個文章再來看這個 就當練習
兩個檔案需要看
uniCloud https://uniapp.dcloud.io/uniCloud/cf-common
百度ai影像識別SDK檔案 https://cloud.baidu.com/doc/IMAGERECOGNITION/s/bk3bcxkdg

將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資料

頁面

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png" @click="testOne"></image>
		<helang-compress ref="helangCompress"></helang-compress>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view>
</template>

功能

說明

首先我們使用了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)
	})

得到拋出的結果

效果如下

完整功能代碼

<script>
	import helangCompress from '@/components/helang-compress/helang-compress';
	export default {
		components: {
			helangCompress
		},
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
			testOne() {
				let vm = this;
				uni.chooseImage({
					count: 1,
					success: function(resq) {
						let filePath = resq.tempFilePaths[0]
						vm.$refs.helangCompress.compress({
							src: filePath,
							maxSize: 100,
							fileType: 'jpg',
							quality: 0.1,
							minSize: -1 //最小壓縮尺寸，圖片尺寸小于該時值不壓縮，非H5平臺有效，若需要忽略該設定，可設定為一個極小的值，比如負數，
						}).then(resp=>{
							uni.request({
								url:resp,
								method:'GET',
								responseType: 'arraybuffer',
								success:function(res){
									let base64s = uni.arrayBufferToBase64(res.data);
									uniCloud.callFunction({
										name:'usehello',
										data: {bas64:base64s}
									}).then(res=>{
										console.log(res.result.result)
									})
								}
							})
						})
					}
				})
			}
		}
	}
</script>

朋友，實不相瞞，我想給你送一份真摯的新年禮物，趁新年伊始快來入駐騰訊云+社區，和我一起做技術分享，在這里我不僅識訓了滿滿的禮物，還獲得了認同感和成就感，技術需要傳播薪種，而我們都是火種的傳播人，朋友，我們山頂見，期待在云端看見你！
https://cloud.tencent.com/developer/support-plan?invite_code=guxjsio9ud3l
后續會推出

前端：js入門 vue入門 vue開發小程式 等
后端： java入門 springboot入門等
服務器：mysql入門 服務器簡單指令 云服務器運行專案
python：推薦不溫卜火 一定要看哦
一些插件的使用等

大學之道亦在自身，努力學習，熱血青春
如果對編程感興趣可以加入我們的qq群一起交流：974178910

有問題可以下方留言，看到了會回復哦