图片识别,人脸识别,植物识别,花卉识别,签到小程序,借助百度AI...

编程小石头

共 21419字,需浏览 43分钟

 ·

2022-05-13 22:42

一,人脸签到效果图

我们做人脸识别签到,其实就是要拿识别的人脸和数据库里的人脸对比,相识度大于一定的值,就可以判定成功。

1aa07e5f365c492eee8786fee968d0bb.webp

如我们识别的结果是98.295%,所以这里就可以认定为签到成功

1-1,效果图

1-1-1,还未签到

7171ddfc8be4969ec933eba228c6cc54.webp

1-1-2,签到

1c67f76eb4f21fb036e1c70a9da1f0a6.webp

1-1-3,签到成功

a66447363cee7a4668162f270b9bd4fb.webp二,准备工作

2-1,注册百度开发者账号

我们这里使用了百度的图片识别技术,所以在使用之前我们要现在注册百度开发者账号,官方地址:https://ai.baidu.com 注册地址:https://login.bce.baidu.com 至于如何注册,这里不需要我再教了吧,大家自行注册就行了。 我们主要用到的是人脸识别技术

7b79dc83b386feb0aa7e43ad539e344e.webp9d58d1ea1fb8f310b7b9237cda79153a.webp

2-2,注册完记得要实名下

现在使用百度图片识别,必须要实名认证下。

6fdd3fe6f8475646b54fcc2c8eb719f9.webp

根据自己的情况选择认证方式

beec38e52a3a3e2b9f9379d1301b3c51.webp

学习的话,只需要个人认证即可。

eef15a655ab70167e9853b2001c9a7ce.webp

2-3,创建人脸识别应用

我们这里主要使用的是百度的人脸对比功能,就是事先把要识别人的照片存到百度数据库,然后打卡时,让对应的人拍好照,和数据库里存的人脸图片进行对比,相似度达到一定数值,比如90%相似度,就可以认为识别成功,进行签到即可。

9225300a4af8833a9b0e4b4ac41d471a.webp在这里插入图片描述

估计百度是在为后期收费做准备,但是目前还有免费资源可以领取。既然可以白piao就先领取免费的。即便后期收费了,咱们学习使用估计也用不了太多,几毛钱的估计就够咱们学习用的了。

人脸识别官方文档:https://cloud.baidu.com/product/face

点击免费领取资源

8cd23fb74e9f554f802037941426424d.webp

既然免费,当然全部领取了啊。

3d1f507e8fad28b990f19e529b12a412.webp

领取完,耐心等待生效即可。如果你在学习的时候,不能在免费领取了,那就花几毛钱付费下也行的,基本上几毛钱就够咱们学习使用了。

2f9c842d7d62df6bf3b472140316d0ff.webp

上面该领的都领完以后,我们就来创建应用吧。

248a980d85eaf740f2fb317ae253445a.webp

默认人脸识别相关的都已经勾选了

b5681a524e9875d7790438d0f954480a.webp

选个人即可。

b59b063f0cb5f267ba363ef1913bbfc8.webp

创建好以后,下面两个东西我们后面会用到,知道在哪里即可。

029aac2fe0afd37c36a8fe07b5459b6b.webp

2-4,添加百度域名到小程序

我们这里要调用百度的人脸识别接口,所以需要配置域名到小程序,如果不配置的话,就会报如下错误。

d642fa12e2c651788a2c3e9426ed4df4.webp

所以需要到小程序后台,把这个https://aip.baidubce.com 添加到如下位置。

c607d888a0e4a677e452a34daf689b5e.webpc1770b0f2bc61854b6e1ef6ff2a6ea89.webp

点击上面的服务设置,然后做如下设置。

3a8b3dd6e44216b501ca8584ab638f3c.webp

一般设置到10分钟左右生效。

三,接入人脸识别

3-1,官方文档

我们在自己的小程序里接入人脸识别,就必须去看百度官方的技术文档。 文档地址:https://ai.baidu.com/ai-doc/FACE/Lk37c1tpf 我们这里主要就看这个人脸对比文档。

2aeeaa70e3bc73f8cfad54d8026ee8ad.webp

官方文档里并没有给出小程序里如何调用的代码。

cc389b0c40e5845d0b47b9cef942a752.webp

所以接下来的学习要跟紧石头哥的脚步,石头哥手把手的带大家实现小程序端的调用。

3-2,人脸注册

我们要想实现人脸识别,就需要一开始先在百度的可视化人脸库里注册人脸,要调用的接口如下。

6e4751ee1b717434370e250a65329670.webpa362a2b61e1fc78ddb889047e3e76ced.webp

在调用这个之前,我们需要先去获取对应的acess_token,所以接下来我们要做的第一步就是获取acess_token

3-2-1,获取acess_token

我们后面做的所有操作,基本上都要获取这个。

40387365a6a5470b8728f4872c9438c6.webp

所以我把源码贴出来给到大家,client_id和client_secret记得换成你自己的。

wx.request({
      url: 'https://aip.baidubce.com/oauth/2.0/token',
      data: {
        grant_type: 'client_credentials',
        client_id:, //应用的API Key
        client_secret:  //应用的Secret Key
      },
      header: {
        'Content-Type': 'application/json' // 默认值
      },
      success: res => {
        this.setData({
          token: res.data.access_token //获取到token
        })
        console.log('获取到的token', this.data.token)
      }
    })

3-2-2,拍人脸照

第二步和第三步要同时进行,所以我把代码放到下面第三步

3-2-3,注册人脸到百度人脸库

我们在拍照以后,获取到图片,并通过 wx.getFileSystemManager().readFile()方法把图片转换为base64,因为百度需要这样格式的数据

dda9518997b976071b3d802d12446276.webp

对应的代码如下:

    var that = this;
    //拍照
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        that.setData({
          src: res.tempImagePath //获取图片
        })
        //图片base64编码
        wx.getFileSystemManager().readFile({
          filePath: that.data.src, //选择图片返回的相对路径
          encoding: 'base64', //编码格式
          success: res => { //成功的回调
            that.setData({
              base64: res.data
            })
            //第三步:上传人脸进行注册
            wx.request({
                url: 'https://aip.baidubce.com/rest/2.0/face/v3/faceset/user/add?access_token=' + that.data.token,
                method: 'POST',
                data: {
                  image: that.data.base64,
                  image_type: 'BASE64',
                  group_id: 'users', //自己建的用户组id
                  user_id: app.globalData.userInfo.phone, //学号
                  user_info: app.globalData.userInfo.name //存储学生姓名
                },
                header: {
                  'Content-Type': 'application/json' // 默认值
                },
                success(res) {
                  that.setData({
                    msg: res.data.error_msg
                  })
                  console.log("人脸注册返回结果", res)
                  //做成功判断
                  if (that.data.msg == 'SUCCESS') { //微信js字符串使用单引号
                    wx.showToast({
                      title: '注册成功',
                      icon: 'success',
                      duration: 2000
                    })
                    // that.registerFace()
                  }
                }
              }),
              //失败尝试
              wx.showToast({
                title: '请重试',
                icon: 'loading',
                duration: 500
              })
          }
        })
      } //拍照成功结束
    }) //调用相机结束

这几个参数,要记得换成自己的

     group_id: 'users', //自己建的用户组id
    user_id: app.globalData.userInfo.phone, //学号或者用户电话能唯一标识用户的
    user_info: app.globalData.userInfo.name //存储用户姓名

我们注册完以后,可以在百度人脸库里看到这条数据,可以看到我们创建的users表。

ae7cf48f601c77a3da1e641296d08e52.webp

3-3,查看人脸库

我们进入百度的控制台,找到如下的类目

9d22451254988e02ba6f07702f77e8c9.webp

然后点开用户123,就可以看到他注册的人脸照片。

01d11a1f0c1c78d28a31ae9ac541f0ac.webp四,人脸比对

我们上面注册好人脸以后,接下来就可以使用人脸打卡功能了。 使用之前还是第一步,获取acess_token

4-1,获取acess_token

  // acess_token获取
  getTokenInfo() {
    var that = this
    wx.request({
      url: 'https://aip.baidubce.com/oauth/2.0/token',
      data: {
        grant_type: 'client_credentials',
        client_id: app.globalData.client_id, //应用的API Key
        client_secret: app.globalData.client_secret //Secret Key
      },
      header: {
        'Content-Type': 'application/json' // 默认值
      },
      success(res) {
        that.setData({
          token: res.data.access_token //获取到token
        })
        console.log(that.data.token)
      }
    })

  },

4-2,人脸比对

核心代码如下:

 //拍照并编码
  takePhoto() {
    let that=this
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        //图片base64编码
        wx.getFileSystemManager().readFile({
          filePath: res.tempImagePath, //选择图片返回的相对路径
          encoding: 'base64', //编码格式
          success: res => { //成功的回调
            that.signInFace(res.data)
          }
        })
      }
    })
  },

  //上传人脸进行 比对
  signInFace(base64) {
    var that = this

    if (base64 != "") {
      wx.request({
        url: 'https://aip.baidubce.com/rest/2.0/face/v3/search?access_token=' + that.data.token,
        method: 'POST',
        data: {
          image: base64,
          image_type: 'BASE64',
          group_id_list: 'users' //自己建的用户组id
        },
        header: {
          'Content-Type': 'application/json' // 默认值
        },
        success(res) {
          console.log("人脸对比返回结果", res)
          if (res.data.error_msg == "match user is not found") {
            wx.showModal({
              title: '签到失败',
              content: '请先注册人脸才可以人脸使用',
            })
          }

          if (res.data.error_msg == "SUCCESS") {
            that.setData({
              msg: res.data.result.user_list[0].score,
            })
            // console.log(res)
            if (that.data.msg > 80) { //相似度大于80
              console.log('人脸识别成功')
            } else {
              wx.showToast({
                title: '人脸识别失败',
              })
            }
          } else {
            wx.showToast({
              title: '人脸识别失败',
            })
          }
        }
      });
    }
    if (base64 == "") {
      wx.showToast({
        title: '请重试',
        icon: 'loading',
        duration: 500
      })
    }
  },

我们执行代码以后,会返回一个相识度,我这里规定相识度80%以上即为同一个人。

1aa07e5f365c492eee8786fee968d0bb.webp

看日志可以知道我们的相识度是98.295%,所以这里就可以认定为签到成功

五,图片识别

我们图片识别其实和上面的人脸识别操作步骤差不多的,依然也是先开通图片识别功能。

e1b0f684bbbfbf67352e77f747220685.webp

通过上图或者这个地址进入图片识别页面:https://cloud.baidu.com/doc/IMAGERECOGNITION/index.html

fdc5bb7c7220e1cf3a80377754e9de24.webp

5-1,创建图片识别应用

和人脸应用一样,也要创建一个应用 。

af6ad0b3a4c2d51a825f498b4191ab8e.webp

点击完创建应用后,把图像识别全部勾选。

4381c686ff5310e5185c321c25b5c895.webp

当然了,如果你一开始考虑清楚都用那些功能以后,可以把你想要的功能都勾选了,这样以后就不用重复的创建应用了。

fd087d88985a8a06b44a8ea94c09fced.webp

这样我们就创建好应用了

53f307f65701f0be14a08f2c60ecd6ff.webp

5-2,领取免费资源

同样的我们要使用图片识别功能,也是要去领取免费资源的,要不然我们连免费使用的额度都没有,当然啦,如果百度后面改规则了,我们就只能付费购买这些资源了。

912a52e4f8b952a0c45abc4bc192d400.webp

所以先把能领的都领取下。

5-3,获取acess_token

使用之前还是要先获取acess_token

  // acess_token获取
  getTokenInfo() {
    var that = this
    wx.request({
      url: 'https://aip.baidubce.com/oauth/2.0/token',
      data: {
        grant_type: 'client_credentials',
        client_id: app.globalData.client_id, //应用的API Key
        client_secret: app.globalData.client_secret //Secret Key
      },
      header: {
        'Content-Type': 'application/json' // 默认值
      },
      success(res) {
        that.setData({
          token: res.data.access_token //获取到token
        })
        console.log(that.data.token)
      }
    })

  },

5-4,图片识别核心文档

我们首先去看下官方文档 https://cloud.baidu.com/product/imagerecognition/general

b1235149ee26a5265a17e9ad3dd14ae3.webp99ca73e244dcb14dba643a727c5676e4.webp

我们这里使用通用物体和场景识别,这样可以识别很多东西

5-5,图片识别

我们做图片识别依然是先拍照,然后上传到百度进行图片识别 我先看下识别结果的格式如下:

fb1fa10bd8606b8d19eb2d253cf394ba.webp

我这里把代码全部贴出来给到大家

5-5-1,wxml代码

 style="width: 100%; height:calc(100vh - 200rpx);">
   style="width: 100%; height:100%;" wx:if="{{isCamera}}" device-position="back" flash="off" binderror="error">
   style="width: 100%; height:100%;" wx:else mode="widthFix" src="{{src}}">


 class='photo-view'>
   class='takePhoto' bindtap="takePhoto">{{btnTxt}}



 class="mask" hidden="{{!isShow}}" bindtap="hideModal">
 class="mask_content" hidden="{{!isShow}}">
   class="mask_title">识别结果如下
   wx:for="{{results}}" wx:key="index">
     class="mask_item">{{item.keyword}}(点击查看)
  

5-5-2,wxss代码

.photo-view {
  width: 100%;
  height: 200rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.takePhoto {
  width: 100rpx;
  height: 100rpx;
  border-radius: 100rpx;
  background-color: #00cc77;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 识别出的结果 */
.mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0.5;
  background: black;
  /* 设置组件的层级 */
  z-index: 100;
}

.mask_content {
  position: fixed;
  left: 80rpx;
  top: 200rpx;
  right: 80rpx;
  height: 600rpx;
  background: white;
  z-index: 200;
  overflow: auto;
}

.mask_title {
  text-align: center;
  font-size: 50rpx;
  color: red;
  margin-bottom: 20rpx;
}

.mask_item {
  text-align: center;
  padding: 15rpx;
  border-bottom: 1px solid gainsboro;
}

5-5-3,js代码

const app = getApp()
Page({
  data: {
    accessToken: "",
    isShow: false,
    results: [{
        keyword: "人物特写",
        score: 0.813571,
        root: "人物-人物特写"
      },
      {
        keyword: "男孩",
        score: 0.630612,
        root: "人物活动-人物特写"
      },
      {
        keyword: "女孩",
        score: 0.353866,
        root: "人物-人物特写"
      }
    ],
    src: "",
    isCamera: true,
    btnTxt: "拍照"
  },
  onLoad() {
    this.ctx = wx.createCameraContext()
    var time = wx.getStorageSync("time")
    var curTime = new Date().getTime()
    var timeInt = parseInt(time)
    var timeNum = parseInt((curTime - timeInt) / (1000 * 60 * 60 * 24))
    console.log("=======" + timeNum)
    var accessToken = wx.getStorageSync("access_token")
    console.log("====accessToken===" + accessToken + "a")
    // accessToken超过30天过期
    if (timeNum > 28 || (accessToken == "" ||
        accessToken == null || accessToken == undefined)) {
      this.accessTokenFunc()
    } else {
      this.setData({
        accessToken: wx.getStorageSync("access_token")
      })
    }
  },
  // 第一步,拍照
  takePhoto() {
    var that = this
    if (this.data.isCamera == false) {
      this.setData({
        isCamera: true,
        btnTxt: "拍照"
      })
      return
    }
    this.ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath,
          isCamera: false,
          btnTxt: "重拍"
        })
        wx.showLoading({
          title: '正在加载中',
        })
        wx.getFileSystemManager().readFile({
          filePath: res.tempImagePath,
          encoding: "base64",
          success: res => {
            that.shibie(res.data)
          },
          fail: res => {
            wx.hideLoading()
            wx.showToast({
              title: '拍照失败,未获取相机权限或其他原因',
              icon: "none"
            })
          }
        })
      }
    })
  },

  //第二步:上传图片进行识别
  shibie(image) {
    var that = this
    if (image == "") {
      wx.showToast({
        title: '请重试',
        icon: 'loading',
        duration: 500
      })
      return
    }

    if (image != "") {
      wx.request({
        url: 'https://aip.baidubce.com/rest/2.0/image-classify/v2/advanced_general',
        method: 'POST',
        data: {
          access_token: that.data.accessToken,
          image: image,
        },
        header: {
          'Content-Type': 'application/x-www-form-urlencoded' // 默认值
        },
        success(res) {
          wx.hideLoading()
          console.log("图片识别返回结果", res)
          // 如果access_token过期,就重新请求access_token
          let code = res.data.err_code
          if (code == 111 || code == 100 || code == 110) {
            wx.clearStorageSync("access_token")
            wx.clearStorageSync("time")
            that.accessTokenFunc()
            return
          }
          // 返回的识别结果
          let results = res.data.result
          if (results != undefined && results != null) {
            that.setData({
              isShow: true,
              results: results
            })
            console.log("识别到的结果", results)
          } else {
            wx.clearStorageSync("access_token")
            wx.showToast({
              icon: 'error',
              title: '识别失败,请重试',
            })
          }
        }
      });
    }

  },

  // 获取百度的AccessToken
  accessTokenFunc() {
    wx.request({
      url: 'https://aip.baidubce.com/oauth/2.0/token',
      data: {
        grant_type: 'client_credentials',
        client_id: app.globalData.client_id, //应用的API Key
        client_secret: app.globalData.client_secret //应用的Secret Key
      },
      header: {
        'Content-Type': 'application/json' // 默认值
      },
      success: res => {
        this.setData({
          accessToken: res.data.access_token //获取到token
        })
        console.log('获取到的token', this.data.accessToken)
        wx.setStorageSync("access_token", this.data.accessToken)
        wx.setStorageSync("time", new Date().getTime())
      },
      fail: res => {
        wx.clearStorageSync("access_token")
        wx.showToast({
          icon: 'error',
          title: '调用失败,请重新尝试',
        })
      }
    })
  },

  // 选择识别的结果
  radioChange: function (e) {
    console.log(e)
    console.log(e.detail)
    console.log(e.detail.value)
    wx.navigateTo({
      url: '/pages/result/list?keyword=' + e.detail.value,
    })
  },
  // 隐藏弹窗
  hideModal: function () {
    this.setData({
      isShow: false,
    })
  },


})

效果图如下:

72a18a08123eec4340aa5d808cd57e0e.webp

识别出来的结果如下:

6bed335750d6832e929715669cc49794.webp

到这里我们图片识别的功能也做好了。欢迎关注编程小石头,后面会出更多更好的内容。

六,植物花卉识别

我们上面既然用了图片识别,其实还可以深入的做下植物和花卉识别。 我们这里用的是百度的植物识别api

147e06c2effbb9ebb675909f77edef43.webp

6-1,拍照识别

先看效果图

8a8364ff775116a64a5db9b06576feb0.webp

可以看出,我们拍照后,就可以识别出来是什么花。 核心代码贴出来给到大家 wxml

 style="width: 100%; height:600rpx">
   style="width: 100%; height:100%;" wx:if="{{isCamera}}" device-position="back" flash="off" binderror="error">
   style="width: 100%; height:100%;" wx:else mode="widthFix" src="{{src}}">


 class='photo-view'>
   class='takePhoto' bindtap="takePhoto">{{btnTxt}}


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

wxss

.photo-view {
  width: 100%;
  height: 200rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.takePhoto {
  width: 100rpx;
  height: 100rpx;
  border-radius: 100rpx;
  background-color: #00cc77;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 识别结果区域 */

.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;
}

js

const app = getApp()
Page({
  data: {
    accessToken: "",
    result: [],
    src: "",
    isCamera: true,
    btnTxt: "拍照"
  },
  onLoad() {
    this.ctx = wx.createCameraContext()
    // 获取accessToken
    var time = wx.getStorageSync("time")
    var curTime = new Date().getTime()
    var timeInt = parseInt(time)
    var timeNum = parseInt((curTime - timeInt) / (1000 * 60 * 60 * 24))
    console.log("=======" + timeNum)
    var accessToken = wx.getStorageSync("access_token")
    console.log("====accessToken===" + accessToken + "a")
    // accessToken超过30天过期
    if (timeNum > 28 || (accessToken == "" ||
        accessToken == null || accessToken == undefined)) {
      this.accessTokenFunc()
    } else {
      this.setData({
        accessToken: wx.getStorageSync("access_token")
      })
    }
  },
  // 第一步,拍照
  takePhoto() {
    var that = this
    if (this.data.isCamera == false) {
      this.setData({
        isCamera: true,
        btnTxt: "拍照"
      })
      return
    }
    this.ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath,
          isCamera: false,
          btnTxt: "重拍"
        })
        wx.showLoading({
          title: '正在加载中',
        })
        wx.getFileSystemManager().readFile({
          filePath: res.tempImagePath,
          encoding: "base64",
          success: res => {
            that.getResult(res.data)
          },
          fail: res => {
            wx.hideLoading()
            wx.showToast({
              title: '拍照失败,未获取相机权限或其他原因',
              icon: "none"
            })
          }
        })
      }
    })
  },
  //获取识别结果
  getResult(base64Img) {
    let that = this
    wx.request({
      // url: 'https://aip.baidubce.com/rest/2.0/image-classify/v1/plant?access_token=' + token,
      url: 'https://aip.baidubce.com/rest/2.0/image-classify/v1/plant',
      method: 'POST',
      data: {
        access_token: that.data.accessToken,
        image: 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
  },



  // 获取百度的AccessToken
  accessTokenFunc() {
    wx.request({
      url: 'https://aip.baidubce.com/oauth/2.0/token',
      data: {
        grant_type: 'client_credentials',
        client_id: app.globalData.client_id, //应用的API Key
        client_secret: app.globalData.client_secret //应用的Secret Key
      },
      header: {
        'Content-Type': 'application/json' // 默认值
      },
      success: res => {
        this.setData({
          accessToken: res.data.access_token //获取到token
        })
        console.log('获取到的token', this.data.accessToken)
        wx.setStorageSync("access_token", this.data.accessToken)
        wx.setStorageSync("time", new Date().getTime())
      },
      fail: res => {
        wx.clearStorageSync("access_token")
        wx.showToast({
          icon: 'error',
          title: '调用失败,请重新尝试',
        })
      }
    })
  },
})

6-2,相册选择识别

效果图

dd25959ab5bb89f8a3409864fd4437df.webp

核心代码贴出来给到大家 wxml


 class="top-img">
     src="{{image}}">


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



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

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;
  }

js

const app = getApp()
var that = ''

Page({
    data: {
        accessToken: "",
        isShow: false,
        image: '/images/banner.png',
        base64Img: '',
        token: '',
        result: []
    },
    onShow() {
        // 获取accessToken
        var time = wx.getStorageSync("time")
        var curTime = new Date().getTime()
        var timeInt = parseInt(time)
        var timeNum = parseInt((curTime - timeInt) / (1000 * 60 * 60 * 24))
        console.log("=======" + timeNum)
        var accessToken = wx.getStorageSync("access_token")
        console.log("====accessToken===" + accessToken + "a")
        // accessToken超过30天过期
        if (timeNum > 28 || (accessToken == "" ||
                accessToken == null || accessToken == undefined)) {
            this.accessTokenFunc()
        } else {
            this.setData({
                accessToken: wx.getStorageSync("access_token")
            })
        }
    },
    //选择图片按钮
    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
                })
            }
        })
    },

    //图片转为base64
    getB64ByUrl(url) {
        wx.getFileSystemManager().readFile({
            filePath: url,
            encoding: 'base64',
            success: (res) => {
                this.setData({
                    base64Img: res.data
                })
            }
        })
    },
    // 获取百度的AccessToken
    accessTokenFunc() {
        wx.request({
            url: 'https://aip.baidubce.com/oauth/2.0/token',
            data: {
                grant_type: 'client_credentials',
                client_id: app.globalData.client_id, //应用的API Key
                client_secret: app.globalData.client_secret //应用的Secret Key
            },
            header: {
                'Content-Type': 'application/json' // 默认值
            },
            success: res => {
                this.setData({
                    accessToken: res.data.access_token //获取到token
                })
                console.log('获取到的token', this.data.accessToken)
                wx.setStorageSync("access_token", this.data.accessToken)
                wx.setStorageSync("time", new Date().getTime())
            },
            fail: res => {
                wx.clearStorageSync("access_token")
                wx.showToast({
                    icon: 'error',
                    title: '调用失败,请重新尝试',
                })
            }
        })
    },

    //植物识别
    plant() {
        if (!this.data.base64Img) {
            this.setData({
                isShow: true
            })
            return
        }
        this.getResult()
    },
    //获取识别结果
    getResult() {
        let that = this
        wx.request({
            // url: 'https://aip.baidubce.com/rest/2.0/image-classify/v1/plant?access_token=' + token,
            url: 'https://aip.baidubce.com/rest/2.0/image-classify/v1/plant',
            method: 'POST',
            data: {
                access_token: that.data.accessToken,
                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
    },
})


浏览 31
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报