一、实现效果
二、查看百度AI开发平台文档
该功能是直接使用百度AI开发平台的动物识别接口,这个接口有两个重要的参数,一是需要获取access_token、二是需要把上传的图片编码为base64。而获取access_token有需要使用另一个接口来获取,获取到后我使用缓存技术把这个acces_token保存起来,并设置一个有效时间。
1、百度AI开发平台上的准备工作
新用户是可以直接领取一年的免费试用时间的。
2、查看接口如何使用
access_token是必须参数,使用所提供的接口获取access_token
识别的图片的编码必须是base64:
三、微信小程序代码实现
wxml
{{animal.name}}
开始识别
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 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() { } })