unicloud云开发---uniapp云开发云函数练习---整合百度ai图像识别SDK

你的名字 2022-10-29 06:23 281阅读 0赞

> 上篇文章[https://blog.csdn.net/qq\_42027681/article/details/113746528][https_blog.csdn.net_qq_42027681_article_details_113746528]我们大致了解了下云函数  
> 这篇文章带大家使用云函数来整合百度ai图像识别SDK  
> 也算是云函数的一个小练习 最好看完上个文章再来看这个 就当练习  
> 两个文档需要看  
> uniCloud [https://uniapp.dcloud.io/uniCloud/cf-common][https_uniapp.dcloud.io_uniCloud_cf-common]  
> 百度ai图像识别SDK文档 [https://cloud.baidu.com/doc/IMAGERECOGNITION/s/bk3bcxkdg][https_cloud.baidu.com_doc_IMAGERECOGNITION_s_bk3bcxkdg]

> 我们的视频教程(免费)链接为[https://static-b5208986-2c02-437e-9a27-cfeba1779ced.bspapp.com/][https_static-b5208986-2c02-437e-9a27-cfeba1779ced.bspapp.com]

### uniapp云函数整合百度ai图像识别SDK ###

*  视频
 *  将sdk制作成公共模块
 *   *  创建common目录
     *  新建公共模块
     *  npm导入百度aip
     *  再次封装
 *  编写云函数
 *   *  代码
     *  代码解释
     *  小踩坑
 *  前端测试
 *   *  页面
     *  功能
     *   *  说明
         *  图片转base64
         *  调用云函数
         *  效果如下
         *  完整功能代码

# 视频 #

云开发云函数练习---整合百度ai开放平台api

# 将sdk制作成公共模块 #

## 创建common目录 ##

如果你没有cloudfunctions 参考上篇文章  
![在这里插入图片描述][20210209001639962.png]

鼠标右键点击这个文件夹 新建common目录  
![在这里插入图片描述][20210209001816909.png]

## 新建公共模块 ##

右键点击common新建公共模块  
我在这里起名为hello  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70] ![在这里插入图片描述][20210209002017121.png]

创建完成

## npm导入百度aip ##

这个时候 我们可以控制台进入 hello目录  
![在这里插入图片描述][20210209002127862.png]  
根据百度ai开放平台图像识别SDK文档  
[https://cloud.baidu.com/doc/IMAGERECOGNITION/s/bk3bcxkdg][https_cloud.baidu.com_doc_IMAGERECOGNITION_s_bk3bcxkdg]

可得 我们需要 npm install baidu-aip-sdk来安装依赖  
在hello目录下安装 执行npm install baidu-aip-sdk 建议使用cmd  
![在这里插入图片描述][2021020900242552.png]  
![在这里插入图片描述][20210209002542132.png]安装完成

## 再次封装 ##

uniapp文档说 需要使用module.exports导出模块

我们在 /hello/index.js来编写

根据百度ai文档 node引入如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 1]  
我们结合下

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  
![在这里插入图片描述][20210209003115422.png]  
右键点击usehello 选择管理公共模块依赖 选择hello 更新依赖  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 2]

## 代码 ##

'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  
在 主函数中编写 这里使用通用物体识别 根据文档  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][20210209003413426.png]

这里我们直接给云函数传送base64数据 当然等会会讲 图片也压缩了(用到了插件)

返回一个Promise对象 如果不使用Promise可以使用回调 但是Promise方便  
我们把识别的结果抛出

云函数编写完成 右键点击hello 更新依赖本模块的云函数

## 小踩坑 ##

如果出现 上传公共模块后 云函数还报错说无依赖的公共模块 需要你上传  
修改 云函数目录下的package.json  
将

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

改为

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

操作完成即可

# 前端测试 #

我们直接使用 index  
![在这里插入图片描述][20210209003847993.png]  
这里给logo图像加了个点击事件 testOne  
使用了别人的压缩插件来压缩图像 插件地址[https://ext.dcloud.net.cn/plugin?id=2316][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][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)
    	})

得到抛出的结果

### 效果如下 ###

![在这里插入图片描述][20210209005204871.gif]

### 完整功能代码 ###

朋友，实不相瞒，我想给你送一份真挚的新年礼物，趁新年伊始快来入驻腾讯云+社区，和我一起做技术分享，在这里我不仅收获了满满的礼物，还获得了认同感和成就感。技术需要传播薪种，而我们都是火种的传播人。朋友，我们山顶见，期待在云端看见你！  
[https://cloud.tencent.com/developer/support-plan?invite\_code=guxjsio9ud3l][https_cloud.tencent.com_developer_support-plan_invite_code_guxjsio9ud3l]  
后续会推出

前端：js入门 vue入门 vue开发小程序 等  
后端： java入门 springboot入门等  
服务器：mysql入门 服务器简单指令 云服务器运行项目  
python：推荐[不温卜火][Link 1] 一定要看哦  
一些插件的使用等

大学之道亦在自身，努力学习，热血青春  
如果对编程感兴趣可以加入我们的qq群一起交流：974178910  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center]

有问题可以下方留言，看到了会回复哦

[https_blog.csdn.net_qq_42027681_article_details_113746528]: https://blog.csdn.net/qq_42027681/article/details/113746528
[https_uniapp.dcloud.io_uniCloud_cf-common]: https://uniapp.dcloud.io/uniCloud/cf-common
[https_cloud.baidu.com_doc_IMAGERECOGNITION_s_bk3bcxkdg]: https://cloud.baidu.com/doc/IMAGERECOGNITION/s/bk3bcxkdg
[https_static-b5208986-2c02-437e-9a27-cfeba1779ced.bspapp.com]: https://static-b5208986-2c02-437e-9a27-cfeba1779ced.bspapp.com/
[20210209001639962.png]: /images/20221024/45c5ac3d57834b67afd29d6c41a95240.png
[20210209001816909.png]: /images/20221024/33eb0b80db32443c86411e73da971c76.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210209001917280.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70
[20210209002017121.png]: /images/20221024/26d2813a84c848f98849655df1a9e896.png
[20210209002127862.png]: /images/20221024/ebc72d3468f04545b753dbda867910da.png
[2021020900242552.png]: /images/20221024/6ce255446db14f78848be47d5f2c2df5.png
[20210209002542132.png]: /images/20221024/037fa7f9783a4773a87841297e479b1d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 1]: /images/20221024/d966b2f2885744cfb5065ad81993f1f8.png
[20210209003115422.png]: /images/20221024/75576fde38014e5ab69db4daf441e49c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 2]: /images/20221024/088089a555ff4768b2afa6a017f1f4f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 3]: /images/20221024/ad0b19af7f31459883f09c00e8db799f.png
[20210209003413426.png]: /images/20221024/fc48c75d1b2b4fbfbcbdbf6c509e8b70.png
[20210209003847993.png]: /images/20221024/9b0343308fa041e09d97888b6c4e14ad.png
[https_ext.dcloud.net.cn_plugin_id_2316]: https://ext.dcloud.net.cn/plugin?id=2316
[https_uniapp.dcloud.io_uniCloud_cf-functions_id_clientcallfunction]: https://uniapp.dcloud.io/uniCloud/cf-functions?id=clientcallfunction
[20210209005204871.gif]: /images/20221024/de2e388f280d475eb2f4130b4ff652e5.png
[https_cloud.tencent.com_developer_support-plan_invite_code_guxjsio9ud3l]: https://cloud.tencent.com/developer/support-plan?invite_code=guxjsio9ud3l
[Link 1]: https://buwenbuhuo.blog.csdn.net/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/e8674a1dcc484a8b81cfacb2b613461c.png