基于百度AI接口的微信小程序-数字识别
-
参考文档：官方文档-文字识别-数字识别
-
开发前的准备：需要在百度AI开放平台创建相关应用实例，在开发中会用到里面的相关数据，具体创建流程可以参考官方文档的QuickStart
-
代码实现效果：
- 代码详情：
- wxml
<view class="container">
<camera
class="camera"
device-position="back"
flash="off"
binderror="error"></camera>
<view class="button" catchtap="numberRecognition">识别</view>
<!-- 遮罩 -->
<view wx:if="{{isShow}}" class='cover'>
<view class='cover_child'>
<text class="child-title">识别结果</text>
<block wx:for="{{numberList}}">
<view class="child-row">
<text>{{item.title}}</text>
<text>{{item.number}}</text>
</view>
</block>
</view>
<image catchtap="hideCover" class="cross" src="../../images/cancel.png " />
<view catchtap="hideCover" wx:if="{{isShow}}" class='bg'></view>
</view>
</view>
- wxss
page {
height: 100%;
width: 100%;
}
.container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
/* 相机 */
.camera {
width: 100%;
height: 100%;
}
/* 识别按钮 */
.button{
position: absolute;
margin-top: 1000rpx;
background: white;
opacity: 0.5;
width: 200rpx;
height: 200rpx;
border-radius: 50%;
text-align: center;
line-height: 200rpx;
font-weight: bold;
font-size: 44rpx;
}
/* 遮罩样式 */
.bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.cover {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 0;
}
.cover_child {
width: 600rpx;
height: 830rpx;
background: rgba(255, 255, 255, 1);
border-radius: 20rpx;
display: flex;
flex-direction: column;
z-index: 5;
}
.child-title {
white-space: nowrap;
margin-left: 43rpx;
margin-top: 32rpx;
width: 137rpx;
height: 32rpx;
font-size: 34rpx;
font-weight: bold;
color: rgba(18, 90, 217, 1);
line-height: 36rpx;
margin-bottom: 31rpx;
}
.child-row {
display: flex;
flex-direction: row;
margin-left: 41rpx;
margin-top: 40rpx;
height: 28rpx;
font-size: 30rpx;
font-weight: 500;
color: rgba(3, 3, 3, 1);
line-height: 36rpx;
}
.cross {
margin-bottom: 110rpx;
bottom: 0rpx;
position: fixed;
width: 60rpx;
height: 60rpx;
z-index: 5;
}
- javascript
Page({
data: {
src: "",
token: "",
base64: "",
isShow: false,
numberList: []
},
numberRecognition(){
wx.showLoading({
title: '识别中...',
})
this.takePhoto();
this.uploadAndRecognition();
},
//拍照
takePhoto() {
var that = this;
//创建拍照上下文对象
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'high',
//拍照成功
success: (res) => {
//console.log(res)
wx.getFileSystemManager().readFile({
filePath: res.tempImagePath,
encoding: 'base64',
success: res => {
//console.log(res)
this.setData({
base64: res.data
})
},
//拍照失败
fail: err => {
console.log(err)
this.showToast();
}
})
},
fail: err => {
this.showToast();
}
})
},
//上传识别
uploadAndRecognition() {
//调用接口，获取token
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)
wx.request({
url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/numbers?access_token=' + res.data.access_token,
method: 'POST',
data: {
//所有图片均需要base64编码、去掉编码头后再进行urlencode
image: decodeURI(this.data.base64),
},
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: res => {
console.log(res.data)
let length = res.data.words_result_num;
console.log(length)
if (length > 0){
for (let i = 0; i < length;i++){
let tempDataList = {
title:"第"+i+"个：",
number: res.data.words_result[i].words
}
console.log(tempDataList)
let temp = "numberList["+ i +"]";
console.log(temp)
this.setData({
[temp]:tempDataList
})
}
this.showCover();
console.log(this.data.numberList)
}else{
wx.showModal({
content: '未识别到数字',
})
}
},
fail: err => {
console.log(err)
this.showToast();
}
})
},
fail:err=>{
console.log(err)
this.showToast();
},
complete:()=>{
wx.hideLoading();
}
})
},
//隐藏遮罩
hideCover() {
this.setData({
isShow: false
})
},
//显示遮罩
showCover() {
this.setData({
isShow: true
})
},
//封装的wx.showToast
showToast() {
wx.showToast({
title: "服务异常，请稍后重试",
icon: 'none',
duration: 3000
})
}
})
- json
{
"navigationStyle":"custom"
}
