一文读懂基于小程序的图像识别

基于微信小程序的图像识别

前言：闲来无事想用小程序做一些简单且容易上手的功能，顺便接触下自己从未涉及到的领域，本文功能采用微信小程序原生开发，纯前端调用开放平台接口，无后端封装，新手也能迅速上手。

一、效果图

开放平台图像识别API主要有：动物识别、植物识别、logo识别、果蔬识别等。开发者们可以领取免费的资源进行使用，在不做商业用途的情况下，例如毕业设计或者功能体验等场景，那额度是绰绰有余的。

二、实现流程

开发流程前的一些准备：
1、准备百度以及微信公众平台账号。
2、准备微信Web开发者工具。

三、前期准备

(1)注册百度开放平台账号

(2)在控制台点击左侧菜单，选择产品服务，搜索图像识别

(3)创建一个新的应用并存储好对应的API Key和Secret Key

(4)用API Key和Secret Key拼接参数调用接口获取Access Token

(5)小程序实现图片上传以及将图片格式转换

(6)拼接参数，调用图像识别接口
在这里插入图片描述

在前期开发准备的过程中，有很多容易踩到的坑，在这里简单分享一下
1、注册账号时找错平台。
2、在申请接口的时候直接添加应用没有领取免费的额度资源。
3、在小程序调用平台开放API时没有配置可信任域名导致一直访问不了。
4、调用接口拼接access_token时直接放到请求的参数上，正确情况是需要拼接在url上的。

四、代码块

WXML部分

<view class="containerBox">
  <view class="leftBtn" bindtap="loadImage">上传图片</view>
  <view class="rightBtn" bindtap="identify">图像识别</view>
</view>
<image src="{
    
    {imgSrc}}" class="showImg"></image>
<view class="result" wx:if="{
    
    {isShowDetail}}">
  <view class="resultTitle">识别结果:</view>
  <view class="productDetailTable">
    <view class="productTableTr">
      <view class="leftTr">
        <view class="little leftTrText">预测得分</view>
      </view>
      <view class="rightTr little">百科信息</view>
    </view>

    <view class="productTableTr" wx:for="{
    
    {resultList}}">
      <view class="leftTr">
        <view class="little leftTrText">{
    
    {
    
    item.score}}</view>
      </view>
      <view class="rightTr little">{
    
    {
    
    item.name}}</view>
    </view>
  </view>
</view>

WXSS部分

.containerBox{
    
    
  width:750rpx;
  display:flex;
  height:62rpx;
  margin-top:20rpx;
}
.leftBtn{
    
    
  width:181rpx;
  height:62rpx;
  color:#4FAFF2;
  border:1rpx solid #4FAFF2;
  border-radius:10rpx;
  text-align: center;
  line-height:62rpx;
  font-size:28rpx;
  margin-left: 158rpx;
}
.rightBtn{
    
    
  width:181rpx;
  height:62rpx;
  color:white;
  border:1rpx solid #4FAFF2;
  border-radius:10rpx;
  text-align: center;
  line-height:62rpx;
  font-size:28rpx;
  margin-left: 73rpx;
  background:#4FAFF2;
}
.showImg{
    
    
  width:600rpx;
  height:600rpx;
  margin-left:75rpx;
  margin-top:25rpx;
  border-radius:20rpx;
}
.result{
    
    
  margin-top:20rpx;
}
.resultTitle{
    
    
  margin-left:75rpx;
}
.productTableTr{
    
    
  height: 80rpx;line-height: 80rpx;border-bottom: 1rpx solid #F8F8F8;display:flex;
}
.leftTr{
    
    
  width: 283rpx;height: 80rpx;line-height: 80rpx;
}
.rightTr{
    
    
  width: 419rpx;height: 80rpx;line-height: 80rpx;color: #FF2525;font-size: 26rpx;
}
.leftTrText{
    
    
  color: #2B79F5;font-size: 28rpx;margin-left: 15rpx;width: 283rpx;
}
.productDetailTable{
    
    
  width: 702rpx;margin-left: 24rpx;border:1rpx solid #F8F8F8;border-radius: 6rpx;
}

JS部分

 wx.request({
    
          
 	  url: 'https://aip.baidubce.com/rest/2.0/image-classify/v1/animal?access_token=' + that.data.token,//动物
      method: 'POST',
      header: {
    
    
        'content-type': 'application/x-www-form-urlencoded'
      },
      data:{
    
    
        image:that.data.baseData,
        scenes:['animal','plant','ingredient'],
      },
      success: function (identify) {
    
    
        that.setData({
    
    
          isShowDetail:true,
          resultList:identify.data.result
        });
      }
    })