參考文檔：官方文檔-文字識別-數(shù)字識別
開發(fā)前的準備：需要在百度AI開放平臺創(chuàng)建相關應用實例，在開發(fā)中會用到里面的相關數(shù)據(jù)，具體創(chuàng)建流程可以參考官方文檔的QuickStart
代碼實現(xiàn)效果：
效果圖
- 代碼詳情：
- 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">識別結(jié)果</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;
//創(chuàng)建拍照上下文對象
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() {
//調(diào)用接口薄风，獲取token
wx.request({
url: 'https://aip.baidubce.com/oauth/2.0/token', //百度智能云相關的接口地址
data: {
grant_type: 'client_credentials',
client_id: 'xxxxxxxxxxxxxxxxxxxxx',//用你創(chuàng)建的應用的API Key
client_secret: 'xxxxxxxxxxxxxxxxxxxxx'//用你創(chuàng)建的應用的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: '未識別到數(shù)字',
})
}
},
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"
}
