一、实现效果
二、查看百度AI开发平台文档
该功能是直接使用百度AI开发平台的动物识别接口，这个接口有两个重要的参数，一是需要获取access_token、二是需要把上传的图片编码为base64。而获取access_token有需要使用另一个接口来获取，获取到后我使用缓存技术把这个acces_token保存起来，并设置一个有效时间。
1、百度AI开发平台上的准备工作
新用户是可以直接领取一年的免费试用时间的。
2、查看接口如何使用
access_token是必须参数，使用所提供的接口获取access_token
文章来源：https://www.toymoban.com/news/detail-513279.html
识别的图片的编码必须是base64：
文章来源地址https://www.toymoban.com/news/detail-513279.html
三、微信小程序代码实现
wxml
<view class="fa">
<view class="top">
<image src="{{imgSrc}}"></image>
</view>
<view class="middle">
<view class="photograph" data-flag="0" bindtap="getImage">拍照识动物</view>
<view class="photos" data-flag="1" bindtap="getImage">相册选择</view>
</view>
<view class="animal">
{{animal.name}}
</view>
<view class="bottom" class="confirm" bindtap="identify">
开始识别
</view>
</view>js代码
// pages/picIdentif/picIdentif.js
Page({
/**
* 页面的初始数据
*/
data: {
imgSrc:'/img/tpsb/cat.jpg',
imgToBaidu:'',
},
getImage:function(e){
var that = this
var flag=e.currentTarget.dataset.flag
if(flag==0) {var sourceType="camera"}
else {var sourceType="album"; }
console.log(sourceType)
wx.chooseMedia({
count: 1,
mediaType: ['image','video'],
sourceType: [sourceType],
maxDuration: 30,
camera: 'back',
success(res) {
// console.log(res)
console.log(res.tempFiles[0].tempFilePath)
that.setData({
imgSrc:res.tempFiles[0].tempFilePath
})
// wx.getFileSystemManager().readFile为图片编码，调用百度接口也是传这个编码后的数据
wx.getFileSystemManager().readFile({
filePath: res.tempFiles[0].tempFilePath, //要读取的文件的路径 (本地路径)
encoding: 'base64', //编码格式
success: res => { //成功的回调
console.log(res)
// console.log(res.data)
that.setData({
imgToBaidu:res.data
})
console.log("编码base64成功")
}
})
}
})
},
identify:function(){
var that=this;
wx.showLoading({
title: '识别中...',
})
// 调用接口
console.log(this.data.imgSrc)
wx.request({
url: 'https://aip.baidubce.com/rest/2.0/image-classify/v2/advanced_general?access_token='+that.data.token,
data: {
// 注意：图片需要base64编码、去掉编码头后再进行urlencode。
image: this.data.imgToBaidu
},
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
method: 'POST',
success (res) {
wx.hideLoading({
success: (res) => {},
})
console.log(res.data)
// 返回了五个结果，需要根据score处理相似度最高的一个结果
let result = res.data.result
let length = res.data.result.length
let max=0.00
let obj={
name:'',
root:'',
max:0.00
}
for(let i=0;i<length;i++){
if(result[i].score>obj.max){
obj.max=result[i].score
obj.name=result[i].keyword
obj.root=result[i].root
} }
console.log("++++++++++++++++识别结果："+obj)
that.setData({
animal:obj
})
}
})
},
// 百度AIP开放平台使用OAuth2.0授权调用开放API，调用API时必须在URL中带上access_token参数
// 获取token
getToken:function(){
console.log("正在创建新的access_token")
var that=this;
// client_id：app_key需要自己去百度智能云创建相应的应用后获取
//client_secret：Secret Key
const url = 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=lFsrBuHHI0WdrqauG8TbapYC&client_secret=2B6WucDBXfswoFfObmawp7Inkj88OAsD';
wx.request({
url:url,
method: 'POST',
success: res => {
console.log("创建access_token成功")
console.log(res)
let thaRres=res.data;
// 将access_token存储到storage中
wx.setStorage({
key:'access_token',
data:thaRres.access_token
});
var date=new Date().getTime();
let time=date+2592000*1000;
console.log('三十天后的时间',time);
console.log('当前时间戳',date)
wx.setStorage({
key:'expires_in',
data:time
});
that.setData({token:thaRres.access_token});
/*
access_token： 要获取的Access Token；
expires_in： Access Token的有效期(秒为单位，一般为1个月)；
*/
},
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
// 自定义头部导航栏文字
wx.setNavigationBarTitle({
title: '动物搜索'
});
//获取storge中的token
var that=this;
wx.getStorage({
key:'expires_in',
success(res){
console.log("缓存中有access_token")
console.log(res)
console.log(res.data)
// 获取成功，证明本地已存有相关token
const newT =new Date().getTime();
// // 用当前时间和存储的时间判断，token是否已过期
if (newT > parseInt(res.data)) {
console.log("token过期，重新获取token")
// token过期，重新获取token
that.getToken();
} else {
console.log("获取本地缓存的token")
// 获取本地缓存的token
let token=wx.getStorageSync('access_token');
console.log("access_token为:"+token)
that.setData({token:token});
console.log("获取本地缓存的token结束")
}
},fail(){
console.log("缓存中没有access_token")
that.getToken();
}
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})到了这里，关于《微信小程序案例12》图片识别功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[微信小程序]在图片上的特定区域点击实现功能](https://imgs.yssmx.com/Uploads/2024/02/787594-1.png)
