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

Posted _轻舟

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于百度AI接口的微信小程序-数字识别相关的知识,希望对你有一定的参考价值。

效果图

  • 代码详情:
    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"
}

以上是关于基于百度AI接口的微信小程序-数字识别的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序 |基于百度AI从零实现人脸识别小程序

微信小程序后台没有背景音乐功能怎么办

超级详细的微信小程序登录基于SpringBoot

微信小程序实现OCR扫描识别

微信小程序 人脸识别登陆

CabloyJS的微信API对接模块:当前支持微信公共号和微信小程序