1. 前言
1.最近突然就想玩玩AI,资料也不多,干脆就找了简单的百度免费AI玩玩
2.百度文档看的头疼,眼花,还是不如直接上手干
3其实所有接口用法差不多,除了人脸识别需要但的sdk
4.最终发现 最后使用的时候 用了不少
Promise
2. 准备工作
1.注册百度AI账号 ,按步骤操作
2.创建应用
3.access_token 获取 主要熟练 api用法
3. 大概的界面
1.
2.当然不会上传我的银行卡了哈哈
![`O91]9X5%G]4OQPLZJ38HNG.png](https://ucc.alicdn.com/pic/developer-ecology/21d91c15d4bf4862b7fca9179938a8f0.png?x-oss-process=image/resize,w_1400/format,webp "`O91]9X5%G]4OQPLZJ38HNG.png")
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(6~]3P70NU@J2MVP$CW1H2.png](https://ucc.alicdn.com/pic/developer-ecology/9a651f8cb34e476ba1883e5f27125e6d.png?x-oss-process=image/resize,w_1400/format,webp "1(6~]3P70NU@J2MVP$CW1H2.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.
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" }) },
