1. 前言
1.最近突然就想玩玩AI,资料也不多,干脆就找了简单的百度免费AI玩玩
2.百度文档看的头疼,眼花,还是不如直接上手干
3其实所有接口用法差不多,除了人脸识别需要但的sdk
4.最终发现 最后使用的时候 用了不少Promise
2. 准备工作
1.注册百度AI账号 ,按步骤操作
2.创建应用
3.access_token 获取 主要熟练 api用法
3. 大概的界面
1.1.png
2.当然不会上传我的银行卡了哈哈
4. 布局代码
<view>
<button type="primary" bindtap="showCamera">拍照识别</button>
<button type="primary" bindtap="openLocalImage">图片识别</button>
<!-- 相机标签 -->
<camera wx:if="{{showCamera}}" device-position="{{pos}}">
<cover-view hover-class="opa" bindtap="getPhoto"></cover-view>
<cover-image bindtap="changePos" src="/public/changeCamera.png"></cover-image>
</camera>
<image src="{{imgUrl}}" mode="widthFix" bindlongpress="savePhoto"></image>
<view class="hint" wx:if="{{imgUrl}}">长按保存图片</view>
</view>
5. 打开本地相册
// 打开本地相册
async openLocalImage() {
console.log("打开相册")
let res = await wx.chooseImage({
count: 1,
sourceType: ['album'],
})
this.setData({
imgUrl: res.tempFilePaths[0]
})
let res2 = await this.base64toUrlencode(res.tempFilePaths[0])
let res3 = await this.recognition(res2)
console.log('------识别------res3', res3)
},
6. 百度AI 接口参数 要求
1.1.png
7. 图片转为base64再进行urlencode编码
base64toUrlencode(imgPath) {
return new Promise((resolve, reject) => {
wx.getFileSystemManager().readFile({
filePath: imgPath,
encoding: 'base64',
success: (res2) => {
resolve(decodeURI(res2.data))
},
fail(error) {
reject(error)
}
})
})
},
8. 调用识别接口
recognition(imgPath) {
return new Promise((resolve, reject) => {
wx.request({
url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/bankcard?access_token=' + this.data.access_token,
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: {
image: imgPath
},
success(res) {
wx.showToast({
title: '识别成功',
})
resolve(res)
},
fail(error) {
wx.showToast({
icon: 'error',
title: '识别失败',
})
reject(error)
},
})
})
},
1.现在这个只是简写 大概的逻辑,具体的接口返回参数
2.
1.png
9. 当然这个access_token 我在 onLoad的时候获取了
1.client_id
2.client_secret
3.这2个都需要创建应用的时候 生成
getToken() {
wx.request({
url: 'https://aip.baidubce.com/oauth/2.0/token',
data: {
grant_type: 'client_credentials',
client_id: 'xxxxxxxxxxxxxxxxxxxxx',//用你创建的应用的API Key
client_secret: 'xxxxxxxxxxxxxxxxxxxxx'//用你创建的应用的Secret Key
},
header: {
'Content-Type': 'application/json' // 默认值
},
success: (res) => {
console.log('res-----------', res)
this.setData({
access_token: res.data.access_token
})
},
fail(error) {
console.log('失败', error)
}
})
},
10.打开相机
// 显示相机的函数 (默认在wxml中添加camera组件, 通过变量控制它的显示和隐藏)
showCamera() {
console.log("显示相机")
this.setData({
showCamera: true
})
},
11. 点击拍照
// 点击拍照的函数
async getPhoto() {
//创建 camera 上下文 CameraContext 对象。
let context = wx.createCameraContext(this)
// 拍摄照片
try {
let res = await context.takePhoto({
quality: "low",
})
// res.tempImagePath 字段是照片的本地缓存路径
this.setData({
showCamera: false, // 隐藏相机
imgUrl: res.tempImagePath
})
this.base64toUrlencode(res.tempImagePath)
let res2 = await this.base64toUrlencode(res.tempImagePath)
let res3 = await this.recognition(res2)
console.log('------识别------res3', res3)
} catch (error) {
console.log("内存不足,拍照失败", err)
}
},
12. 长按保存
savePhoto() {
if (!this.data.imgUrl) return;
// 把图片保存到系统相册
wx.saveImageToPhotosAlbum({
filePath: this.data.imgUrl,
success() {
wx.showToast({
title: '图片已保存',
})
}
})
},
13.切换摄像头
changePos() {
this.setData({
pos: this.data.pos == "back" ? "front" : "back"
})
},
网友评论