1.使用百度AI识图api,进行识图

1.操作步骤

1.利用uni.chooseImage的Api方法进行绑定一张图片

2.将绑定好的图片进行base64转换（在进行uniapp转换之前需要npm一下，下载image-tools）

ps:在百度识图api请求前需要进行proxy代理解决跨域需求

3.获取高德api的Access-token

4.将获取到的Access-token和base64图片进行百度识图api的请求验证

2.详解拆分 

1.下载引入转换base64的模块化组件 

1.npm i image-tools --save   //下载

2.使用：import {pathToBase64,base64ToPath} from 'image-tools'

 使用转化base64

import {
pathToBase64,
base64ToPath
} from 'image-tools'

1.利用uni.chooseImage的Api方法进行绑定一张图片

2.将绑定好的图片进行base64转换

btnTankptoto() {
uni.chooseImage({
count: 1, //默认9
success: (res) => {
console.log(res)
//将获取到的图片保存
this.imagpath = res.tempFilePaths[0]
      
//将获取到的图片利用npm引入的方法进行转换成base64
pathToBase64(res.tempFilePaths[0])
.then(base64 => {
console.log(base64)
this.baseImageList = base64
console.log('11', this.baseImageList)
//成功之后调用识图api方法
this.imgclassidiy(this.baseImageList)
})
.catch(error => {
console.error(error)
})
},
})
},

ps：跨域请求操作

uni-app的跨域请求proxy代理在manifest.json里面的源码视图里面写入

在进行百度识别api之前要跨域

 

 

3.获取高德api的Access-token

4.将获取到的Access-token和base64图片进行百度识图api的请求验证

  PS:KEY API 和 secret key 用自己创建的

url:'/baiduApigrant_type=client_credentials&client_id=2Wv2BFOVjRAmbVHAXrr4vt&client_secret=vmTpTUL2gNBRRWP0fHq5t0fhx5Bl1w',

async imgclassidiy(a) {
// key api： 2Wv2BFOVjRAmbVzxHAXrr4vt
// Secret Key：  vmTpTUL2gNBRRWP0fHq5t0fhx925Bl1w;

// 通过请求方式获取“Access Token获取
let res = await uni.request({
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
url: '/baiduApi?grant_type=client_credentials&client_id=2Wv2BFOVjRAVzxHAXrr4vt&client_secret=vmTpTUL2gNBRRWP0fHq5t0fh25Bl1w',
})
console.log('zz', res)

let access_token = res[1].data.access_token
    
//使用百度识图api的请求方式进行识图
let data = await uni.request({
url: 'https://aip.baidubce.com/rest/2.0/image-classify/v2/advanced_general',
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: {
access_token: access_token, //access.token，获取到的
image: a, //base64图片
baike_num: "1" //说明，详情，数字代表详情只显示几条数据的
},
})
console.log('sj', data)
this.imgspath = data[1].data.result
console.log(this.imgspath)
//调用弹出层
this.toggle()
},

}

3.完整代码

<template>
<view class="content">
<!-- //按钮选择图片 -->
<button type="primary" @click="btnTankptoto">拍照或者选择照片</button>
<!-- //显示的照片 -->
<image :src="imagpath" mode="widthFix" style="width: 100%;"></image>
<!-- //弹出层 -->

<uni-popup ref="popup" background-color="#fff" type="bottom">
<view class="popup-content" v-for="item in imgspath "><text class="text">{{item.keyword }}</text></view>
</uni-popup>


</view>
</view>
</template>

<script>
import {
pathToBase64,
base64ToPath
} from 'image-tools'
export default {
data() {
return {

imagpath: '', //图片
imgspath: [], //保存查询到的信息

baseImageList: [], //存储图片base64，用于上传后端

}
},
onLoad() {

},
methods: {
//弹出层
toggle(type) {
this.$refs.popup.open()
},

//1 从拍照或者相册获取一张照片
btnTankptoto() {
uni.chooseImage({
count: 1, //默认9
success: (res) => {
console.log(res)
//将获取到的图片保存
this.imagpath = res.tempFilePaths[0]
//将获取到的图片利用npm引入的方法进行转换成base64
pathToBase64(res.tempFilePaths[0])
.then(base64 => {
console.log(base64)
this.baseImageList = base64
   console.log('11', this.baseImageList)
//成功之后调用识图api方法
this.imgclassidiy(this.baseImageList)
})
.catch(error => {
console.error(error)
})
},
})
},
//请求百度识图接口部分
async imgclassidiy(a) {
//自己的 key api： 2Wv2BFOVjRAmbVzxHAXrr4vt
//自己的 Secret Key：  vmTpTUL2gNBRRWP0fHq5t0fhx925Bl1w;

// 通过请求方式获取“Access Token获取
let res = await uni.request({
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
                   //获取toke的地址
       url: '/baiduApi?grant_type=client_credentials&client_id=2Wv2BFOVjRAmbVzxHrr4vt&client_secret=vmTpTUL2gNBRRWP0fHq5t0fhx9Bl1w',
})
console.log('zz', res)

let access_token = res[1].data.access_token
//使用百度识图api的请求方式进行识图
let data = await uni.request({
  url: 'https://aip.baidubce.com/rest/2.0/image-classify/v2/advanced_general',
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: {
access_token: access_token, //access.token，获取到的
image: a, //base64图片
baike_num: "1" //说明，详情，数字代表详情只显示几条数据的
},
})
console.log('sj', data)
this.imgspath = data[1].data.result
console.log(this.imgspath)
//调用弹出层
this.toggle()
},

}
}
</script>

<style>
.popup-content {
margin: 0 auto;
text-align: center;
}
</style>

效果图

 

栓Q