基于百度AI接口的微信小程序-数字识别

• 参考文档：官方文档-文字识别-数字识别

• 开发前的准备：需要在百度AI开放平台创建相关应用实例，在开发中会用到里面的相关数据，具体创建流程可以参考官方文档的QuickStart

• 代码实现效果：

• 代码详情：
  1. 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>

1. 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;
         }

1. 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
             })
           }
         })

1. json

{
  "navigationStyle":"custom"
}