当前位置: 首页 > news >正文

微信小程序调用百度智能云API(菜品识别)

一、注册后生成应用列表创建应用

在这里插入图片描述

二、找到当前所需使用的api菜品识别文档

在这里插入图片描述

三、点链接看实例代码

在这里插入图片描述
这里需要使用到如下几个参数(如下),其他的参数可以不管

  1. client_id : 就是创建应用后的API Key
  2. client_secret: 就是创建应用后的Secret Key
  3. image: 需要用图片转换后的base64
  4. url : 需要用到图片的线上地址,不能使用本地ip地址

在这里插入图片描述
调用成功后会如下图返回数据,当前使用以下三个数据

   calorie: "",//卡路里name: "",   //菜名probability: ""//置信度值

在这里插入图片描述
四、实例调用分布代码
调用代码分解

  1. 先上传图片后获取本地图片路径
async afterRead(event) {wx.showLoading()const {file} = event.detailconst {personPhoto = []} = this.data;personPhoto.push({   ...file,url: file.url});this.setData({personPhoto: personPhoto  //照片回显在页面上显示});const data = await this.getBase64URL(event.detail.file.url)    //调用获取base64}
  1. 后去上传的图片后获取base64图片地址
    //获取bas464地址getBase64URL(file) {return new Promise((resolve, reject) => {wx.getFileSystemManager().readFile({filePath: file, //要读取的文件的路径 (本地路径)encoding: "base64", //指定读取文件的字符编码,如果不传 encoding,则以 ArrayBuffer 格式读取文件的二进制内容success(res) {// encodeURIComponent 可把字符串作为URI 组件进行编码。其返回值URIstring 的副本,其中的某些字符将被十六进制的转义序列进行替换resolve( encodeURIComponent(res.data))   //这里记得把base64转换一遍,否则会报错},fail(error) {console.log(error);}})})},
  1. 去获取token
    //根据参数获取tokengetAccessToken() {const params = {grant_type: 'client_credentials',client_id: 'q9NvyRRPAAWtEnUQGYztWIoY',client_secret: 'wGbmuZmSiMUKuoZsCrj7xbLJPeigivUR'}return new Promise((res, rej) => {wx.request({url: getImgToken,method: "POST",data: params,header: {'content-type': 'application/x-www-form-urlencoded',},success(obj) {if (obj.statusCode == 200) {res(obj.data.access_token)}},fail(err) {rej({msg: '网络错误',detail: null});}})})},
  1. 去调用获取数据的接口
  const _this = thiswx.request({url: 'https://aip.baidubce.com/rest/2.0/image-classify/v2/dish?access_token=' + await _this.getAccessToken(),method: "POST",headers: {'Content-Type': 'application/x-www-form-urlencoded'},data: `image=${data}`,success(obj) {if (obj.statusCode == 200) {if (obj.data.result && obj.data.result.length > 0) {obj.data.result.forEach( item =>{item.probability = (item.probability*100).toFixed(2)})_this.setData({result: obj.data.result})} else {wx.showToast({title: '未识别出菜品',icon:'none'})_this.setData({result:[]})}}wx.hideLoading()},fail(err) {rej({msg: '网络错误',detail: null});wx.hideLoading()}})

五、上实图效果

预览图

数据

六、完整实例调用代码

    //图片上传回调函数async afterRead(event) {wx.showLoading()const {file} = event.detailconst {personPhoto = []} = this.data;personPhoto.push({   ...file,url: file.url});this.setData({personPhoto: personPhoto  //照片回显在页面上显示});const data = await this.getBase64URL(event.detail.file.url)    //调用获取base64const image = 'https://picnew9.photophoto.cn/20141014/cuijiaozhuertupian-12936350_1.jpg' //测试使用地址const _this = thiswx.request({url: 'https://aip.baidubce.com/rest/2.0/image-classify/v2/dish?access_token=' + await _this.getAccessToken(),method: "POST",headers: {'Content-Type': 'application/x-www-form-urlencoded'},data: `image=${data}`,success(obj) {if (obj.statusCode == 200) {if (obj.data.result && obj.data.result.length > 0) {obj.data.result.forEach( item =>{item.probability = (item.probability*100).toFixed(2)})_this.setData({result: obj.data.result})} else {wx.showToast({title: '未识别出菜品',icon:'none'})_this.setData({result:[]})}}wx.hideLoading()},fail(err) {rej({msg: '网络错误',detail: null});wx.hideLoading()}})},//获取bas464地址getBase64URL(file) {return new Promise((resolve, reject) => {wx.getFileSystemManager().readFile({filePath: file, //要读取的文件的路径 (本地路径)encoding: "base64", //指定读取文件的字符编码,如果不传 encoding,则以 ArrayBuffer 格式读取文件的二进制内容success(res) {// encodeURIComponent 可把字符串作为URI 组件进行编码。其返回值URIstring 的副本,其中的某些字符将被十六进制的转义序列进行替换resolve( encodeURIComponent(res.data))   //这里记得把base64转换一遍,否则会报错},fail(error) {console.log(error);}})})},//根据参数获取tokengetAccessToken() {const params = {grant_type: 'client_credentials',client_id: 'q9NvyRRPAAWtEnUQGYztWIoY',client_secret: 'wGbmuZmSiMUKuoZsCrj7xbLJPeigivUR'}return new Promise((res, rej) => {wx.request({url: getImgToken,method: "POST",data: params,header: {'content-type': 'application/x-www-form-urlencoded',},success(obj) {if (obj.statusCode == 200) {res(obj.data.access_token)}},fail(err) {rej({msg: '网络错误',detail: null});}})})},

l

七:其他说明

  1. 在概览中查看使用量服务列表

在这里插入图片描述

  1. 接口报错可查看错误码表错误码表
    在这里插入图片描述
    制作不易,觉得用的上的还请麻烦点个关注,赞一个呗
http://www.lryc.cn/news/320581.html

相关文章:

  • idea项目mapper.xml中的SQL语句黄色下划线去除
  • es 聚合操作(二)
  • 【vue.js】文档解读【day 5】| ref模板引用
  • 算法简单小技巧
  • 前端入职配置新电脑!!!
  • Java面试题总结15之简述你对RPC,RMI的理解
  • 内网穿透利器 n2n 搭建指南
  • phpcms头像上传漏洞引发的故事
  • 二叉树|二叉树理论基础、二叉树的递归遍历
  • JavaScript 语法-对象
  • 代码随想录阅读笔记-哈希表【四数之和】
  • JVM学习——双亲委派机制
  • 【Paper Reading】6.RLHF-V 提出用RLHF的1.4k的数据微调显著降低MLLM的虚幻问题
  • Aloudata 倾力打造,《Data Fabric 白皮书 2.0》正式发布
  • docker内部无法使用ping等网络工具解决方案
  • 后端工程师快速使用vue和Element
  • 自学rabbitmq入门到精通
  • 由浅到深认识C语言(13):共用体
  • python爬虫(9)之requests模块
  • phpstudy自定义安装mysql8.3并启动
  • Netty 学习资料
  • 【概率论中的两种重要公式:全概率和贝叶斯】
  • python中的闭包
  • 成功解决RuntimeError: OpenSSL 3.0‘s legacy provider failed to load
  • 【 React 】React 组件之间如何通信?
  • 汇总全网免费API,持续更新(新闻api、每日一言api、音乐。。。)
  • Android SystemServer进程解析
  • Github主页设置贪吃蛇详细教程
  • 二、实现fastdfs文件上传与延迟删除功能的Spring Boot项目
  • Android FrameWork 学习路线