当前位置: 首页 > 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. 接口报错可查看错误码表错误码表
    在这里插入图片描述
    制作不易,觉得用的上的还请麻烦点个关注,赞一个呗

相关文章:

  • 【计算机网络】集线器
  • 鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:Search)
  • 前端开发者如何打造自己的生态以及ip
  • 哥斯拉流量webshell分析-->ASP/PHP
  • Docker 笔记(五)--链接
  • Qt 信号槽
  • 【学习学习】学习金字塔
  • IIS上部署.netcore WebApi项目及swagger
  • 行为型-观察者模式
  • php常用设计模式应用场景及示例
  • 超实用!免费软件站大盘点,总有一款适合你
  • 【兆易创新GD32H759I-EVAL开发板】 TLI(TFT LCD Interface)用法详细介绍
  • MySQL调优之SQL语句
  • 从历年315曝光案例,看APP隐私合规安全
  • el-form 的表单校验,如何验证某一项或者多项;validateField 的使用
  • 《用数据讲故事》作者Cole N. Knaflic:消除一切无效的图表
  • 【跃迁之路】【733天】程序员高效学习方法论探索系列(实验阶段490-2019.2.23)...
  • ES6系列(二)变量的解构赋值
  • gitlab-ci配置详解(一)
  • IP路由与转发
  • javascript从右向左截取指定位数字符的3种方法
  • JS基础之数据类型、对象、原型、原型链、继承
  • nfs客户端进程变D,延伸linux的lock
  • npx命令介绍
  • vue从创建到完整的饿了么(11)组件的使用(svg图标及watch的简单使用)
  • Web Storage相关
  • webpack入门学习手记(二)
  • 阿里云应用高可用服务公测发布
  • 从零搭建Koa2 Server
  • 关于字符编码你应该知道的事情
  • 前端之React实战:创建跨平台的项目架构
  • 强力优化Rancher k8s中国区的使用体验
  • 详解NodeJs流之一
  • 移动端解决方案学习记录
  • Hibernate主键生成策略及选择
  • Spring第一个helloWorld
  • 带你开发类似Pokemon Go的AR游戏
  • 曜石科技宣布获得千万级天使轮投资,全方面布局电竞产业链 ...
  • ​MySQL主从复制一致性检测
  • #NOIP 2014# day.1 T3 飞扬的小鸟 bird
  • (pojstep1.1.2)2654(直叙式模拟)
  • (二)Linux——Linux常用指令
  • (附源码)python房屋租赁管理系统 毕业设计 745613
  • (附源码)spring boot车辆管理系统 毕业设计 031034
  • (附源码)计算机毕业设计大学生兼职系统
  • (三)模仿学习-Action数据的模仿
  • (十)【Jmeter】线程(Threads(Users))之jp@gc - Stepping Thread Group (deprecated)
  • (转)编辑寄语:因为爱心,所以美丽
  • .java 指数平滑_转载:二次指数平滑法求预测值的Java代码
  • .NET Core 项目指定SDK版本
  • .NET Framework 的 bug?try-catch-when 中如果 when 语句抛出异常,程序将彻底崩溃
  • .Net IOC框架入门之一 Unity
  • .Net开发笔记(二十)创建一个需要授权的第三方组件
  • .NET使用HttpClient以multipart/form-data形式post上传文件及其相关参数
  • .so文件(linux系统)