微信小程序---植物识别（百度AI开放平台）

效果展示

一.wxml部分

图片展示，选择及识别按钮，识别结果

<!-- 图片展示 -->
<view class="top-img">
<image src="{{image}}" ></image>
</view>

<!-- 选择图片及植物识别 -->
<view class="center">
<text class="selece-img" wx:if="{{isShow}}">请选择图片！</text>
<button bindtap="imgSelect">选择图片</button>
<button type="primary" bindtap="plant" >植物识别</button>
</view>

<!-- 识别结果 -->
<view class="bottom" wx:if="{{result.length != 0}}">
  <view class="title">
    <text>植物名称</text>
    <text>识别率</text>
  </view>
  <view class="info" wx:for="{{result}}" wx:key="index">
    <text>{{item.name}}</text>
    <text>{{item.score}}</text>
  </view>
</view>

二.wxss部分

样式部分

.top-img{
  margin: 20rpx;
  width: 95%;
  height: 440rpx;
  border:1rpx solid #efefef;
  border-radius: 20rpx;
  box-shadow: 1rpx 1rpx 15rpx #ddd;
  overflow: hidden;
}
.top-img image{
  width: 100%;
  height: 100%;
}
.center{
  margin: 20rpx;
  width: 95%;
}
.selece-img{
  font-size: 26rpx ;
  color:red;
}
.center button{
  margin-top: 30rpx;
}
.bottom{
  margin: 20rpx;
  width: 95%;
  height: 300rpx;
  border:1rpx solid #efefef;
  border-radius: 20rpx;
  box-shadow: 1rpx 1rpx 15rpx #ddd;
}
.title{
  display: flex;
  justify-content: space-around;
  margin-top: 20rpx;
}
.title text {
  font-weight: 700;
  font-size: 32rpx;
}
.info{
  display: flex;
  justify-content: space-around;
  margin-top: 20rpx;
}

三.json部分

独立设置导航栏样式

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#2b4b6b",
  "navigationBarTitleText": "植物识别",
  "navigationBarTextStyle": "white"
}

四.js部分

• 读取本地相册或调用相机

• 将获取的图片转为base64格式

• 获取token

• 发送请求

• 处理结果

  const app = getApp() var that = ''

  Page({ data: { isShow:false, image:'../../image/plant.png', base64Img:'', token:'', result:[] }, //选择图片按钮 imgSelect(){ this.setData({ isShow:false }) wx.chooseImage({ count: 1, sizeType:['original', 'compressed'], sourceType:['album', 'camera'], success:(res)=>{ const tempFilePaths = res.tempFilePaths[0] this.getB64ByUrl(tempFilePaths) this.setData({ image:tempFilePaths }) } }) }, //植物识别 plant(){ if(!this.data.base64Img){ this.setData({ isShow:true }) return } this.getToken() }, //图片转为base64 getB64ByUrl(url){ wx.getFileSystemManager().readFile({ filePath:url, encoding:'base64', success:(res)=>{ this.setData({ base64Img:res.data }) } }) }, //获取token getToken(){ wx.showLoading({ title: '识别中...', }) wx.request({ url: 'aip.baidubce.com/oauth/2.0/t… Key】&client_secret=【你的Secret Key】', success:(res)=>{ const token = res.data.access_token this.getResult(token) } }) }, //获取识别结果 getResult(token){ wx.request({ url: 'aip.baidubce.com/rest/2.0/im…' + token, method:'POST', data:{ image:this.data.base64Img }, header:{ 'Content-Type':'application/x-www-form-urlencoded' }, success:(res)=>{ console.log(res); this.setData({ result:that.resultFilter(res.data.result) }) }, complete:()=>{ wx.hideLoading() } }) }, //result结果过滤 resultFilter(arr){ arr.forEach((item)=>{ item.score = (item.score.toFixed(4)*100).toFixed(2) + '%' }) return arr }, // 生命周期函数--监听页面加载 onLoad: function (options) { that = this }, })

Token获取及植物识别部分拆息

注: 上面代码已经完成所有功能模块，只是API Key和Secret Key需要填入个人的，可在百度AI开放平台免费注册，每日可免费识别500次，以下为获取API Key和Secret Key教程

1.植物识别接入网址：需要创建应用，获取到API Key和Secret Key

百度智能云-管理中心

2.在百度AIP开放平台调用API时必须在URL中带上access_token参数，详情参考

   鉴权认证机制

3.植物识别接口及说明请参考官网

图片识别-植物识别