当前位置:   article > 正文

【微信小程序】调用百度API进行图像识别(以植物识别为例)_植物识别api

植物识别api

微信小程序调用百度API进行图像识别(以植物识别为例)

需要素材与源码可联系笔者,项目文件过多不适宜全部展示。

微信小程序调用百度API可分为以下三步:

  1. 注册百度智能云账号,并开通植物识别API
  2. 在小程序中调用
  3. 渲染在小程序页面上

1.注册智能云账号

移步百度只能云平台https://cloud.baidu.com/
注册好账号之后,把鼠标放在产品上,侧边会展开具体的产品,这里我们选择图像技术,会展开三级标题,选择其中的植物识别,点击

在这里插入图片描述
进入后点击开屏大字立即使用

跳转到下图界面,去创建应用
在这里插入图片描述

之后页面跳转到填写信息的界面,首先给你的应用取个名字,然后这里我们选择植物识别,当然如果你还想实现其他技术也是可以的,具体操作过程也是大同小异。后面还会填一段应用描述,这里随便写两句就好啦。最后点击立即创建

在这里插入图片描述

创建好之后打开我们的应用,可以看到API key和Secret key,通过这两个值我们可以获取到access_token,获取方法见 百度鉴权认证机制在这里插入图片描述
或者也可以直接点击API在线调试,按照以下步骤也可以获取到access_token
在这里插入图片描述

2.小程序调用

小程序创建项目:略

这边建议开通云函数,不然还要解决一系列跨域问题。
在这里插入图片描述
点击云开发,找到开发环境,把env参数写到app.js中。
开通好之后云函数的文件夹会带小云的标志,如下图
在这里插入图片描述

以下是云函数中index.js文件

// 云函数入口文件
console.log("成功调用云函数!!!!------------------")
const cloud = require('wx-server-sdk')
var AipImageClassifyClient = require("baidu-aip-sdk").imageClassify;

cloud.init()
// 设置APPID/AK/SK,这里需要改成你自己的APPID/AK/SK
var APP_ID = "wxc63****";
var API_KEY = "Rx3b3Bxu*****";
var SECRET_KEY = "cx4OwRf0jbhR*****";

// 新建一个对象,建议只保存一个对象调用服务接口
var client = new AipImageClassifyClient(APP_ID, API_KEY, SECRET_KEY);

// 如果有可选参数
var options = {};
options["baike_num"] = "5";

// 云函数入口函数
exports.main = async (event, context) => {
  let flower = await AIflower();
  // console.log(flower);
  return{
    flower
  }

  // event.img图片必须是base64编码的
  function AIflower(){
    return new Promise((resolve,reject) => {
      // 带参数调用植物识别
      client.plantDetect(event.img, options)
      .then((res) => {
        resolve(res);
      //  resolve(JSON.stringify(res));
      })
      .catch((err) => {
        // 如果发生网络错误
        reject(err);
      });
    })
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42

下面是上传图片的相关代码,需要先把图片转成base64编码,植物识别需要一个参数,就是图片的base64编码,返回值是name(植物名称)和score(相似度)

// 函数定义
  selectImage(){
    wx.chooseImage({
      count:1,
      // 指定只能上传压缩图
      sizeType: ['compressed'],
      sourceType: ['album','camera'],
      success: (res) => {
        // console.log(res);
        const path = res.tempFilePaths[0];
        // 解码图片base64
        var imgbase = wx.getFileSystemManager().readFileSync(path,"base64");
        this.flowerCloud(imgbase);
        this.setData({
          imagePath:path,
        })
      },
      fail: (err) => {
        console.log(err);
      }
    })
  },

  baikeShow(event){
    const baikedata = event.currentTarget.dataset.itemdes;
    this.setData({
      isShow:true,
      baikedata: baikedata
    })
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

下面为调用云函数,这里的name指的是云函数根目录下的文件夹名称!!!

// 定义调用云函数的函数flowerCloud
  flowerCloud(imgbase){
    wx.cloud.callFunction({
      name:'flowers',
      data:{
        img:imgbase
      }
    })
    .then((res) => {
      let answer1 = res.result.flower.result;
      // map遍历
      let answer = answer1.map((item) => {
      const name = item.name;
      const score = (item.score*100).toFixed(2) + '%'; 
      return {
          name,
          score
      }
     })
   })
   .catch((err) => {
      console.log(err);
    })
  },

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

我们可以成功得到一组返回值,可以打印一下调用接口得到的res:
在这里插入图片描述
然后我们只需要把这些数据渲染到前端界面就可以了。

3.渲染

用一个answer储存从接口返回的数据,从上面的结果可以看到有namescore,我们可以直接把用for循环渲染到界面上

 <view class="show">
    <view class="title">
      <view>名称</view>
      <view>可信度</view>
    </view>
    <block wx:for="{{answer}}" wx:key="index">
      <view class="title data">
        <view>{{item.name}}</view>
        <view>{{item.score}}</view>    
      </view>
    </block>
  </view>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

4.结果展示

在这里插入图片描述
可显示植物名称和对应的相似度。

5.可能遇到的坑

  1. 云函数上传之后,记得右键点击云函数根目录,同步云函数列表
  2. 如果需要从数据库调用数据,比如说先识别出植物的名称,然后需要从数据库调用该植物所对应的英文名并渲染,会遇到异步问题,后端数据发生了改变,但是页面渲染的数据没有改变(或者获取不到)
  3. 一定要多次调试,记得随手console.log返回的数据,可能会发现很多理论上没有问题,但运行起来确实有问题的情况(乐
  4. (补充上一条)这些问题大多都是因为

小程序是基于双线程模型,那就意味着任何数据传递都是线程间的通信,也就是都会有一定的延时。这不像传统Web那样,当界面需要更新时,通过调用更新接口 UI 就会同步地渲染出来。在小程序架构里,这一切都会变成异步。

——摘自小程序开发文档


完结撒花~

PS:以上均为片段代码,数据定义和样式等内容需要自己码,需要完整代码可联系笔者

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/705280
推荐阅读
相关标签
  

闽ICP备14008679号