微信小程序 文字识别 实战

体验地址，微信搜索小程序：叉烧包打狗二队

这篇文章主要记录了，我制作文字识别小程序的过程和方法

基础设置

app.js 全局配置文件

{
  "pages": [
    "pages/word/word",
    "pages/wordcloud/wordcloud",
    "pages/plant/plant",
    "pages/index/index",
    "pages/usualImage/usualImage",
    "pages/animal/animal",
    "pages/wine/wine",
    "pages/jingdian/jingdian",
    "pages/shucai/shucai"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "叉烧包打狗",
    "navigationBarTextStyle": "black"
  },
      //底部栏 list至少需要两个
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "识别",
        "iconPath": "../miniprogram/images/im1.png",
        "selectedIconPath": "../miniprogram/images/im1.png"
      },
      {
        "pagePath": "pages/index/index",
        "text": "还是识别",
        "iconPath": "../miniprogram/images/user-unlogin.png",
        "selectedIconPath": "../miniprogram/images/user-unlogin.png"
      }
    ]
  },
  "sitemapLocation": "sitemap.json",
  "style": "v2"
}

文字识别 页面

1、创建word 文件夹 并加入 page文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2pnuEl0r-1622432647651)(
)]

2、修改word.wxml

<!-- 文字识别 百度接口调用 -->

<view class="pages">
  <view class="face">
    <image src="{{image}}" mode="widthFix"></image>
  </view>
</view>

<view class="result">
  <text>识别结果</text>
  <text id="result-text">复制</text>
</view>

<view class="words">
<block wx:for='{{words}}'>
  <view class="aitext">{{item.words}}</view>
</block>
</view>

<view class="btn">
  <button type="primary" bindtap="wordImage">选择图片</button>
</view>

3、修改word.wxss

/* pages/word/word.wxss */
.pages{background: #0c5ebd;}
.face{background: white;height: 500rpx;
  margin: 0 35rpx;
  text-align: center;
  overflow: hidden;
}
.face image{width: 500rpx;height: 500rpx;}

.result{
  display: flex;
  justify-content: space-between;
  padding: 35rpx;
}

.result text{font-size: 30rpx;color: #00a4ff;}
#result-text{background: blueviolet;padding: 0 20rpx;color: white;}

.words{height: 470rpx;background: #0a6ad8;margin: 0 35rpx;overflow-y: auto;}
.aitext{font-size: 15px;}

.btn{position: fixed;bottom: 5rpx;width: 100%;}
.btn button{width: 350rpx;
border-radius: 70rpx;}

word.js 核心

分析

这个小程序的文字识别，是基于百度文字识别 api 的调用

百度文字识别文档：https://ai.baidu.com/ai-doc/OCR/1k3h7y3db

代码分析过程：

• 在本地获取一张图片
• 上传到百度
• 百度获取到图片解析
• 返回文字结果
• 将文字结果渲染到word.wxml

api 调用分析

由接口文档知：

• HTTP 方法：POST
• 请求URL： https://aip.baidubce.com/rest/2.0/ocr/v1/accurate_basic
• URL参数：access_token
• access_token ：通过 API Key和Secret Key获取的access_token
• 最后一个箭头可知请求的格式

access_token 的获取

由文字调用文档可知，调用接口需要获取 access_token 值

access_token 文档：https://ai.baidu.com/ai-doc/REFERENCE/Ck3dwjhhu

如何发送请求：

• 授权服务地址：https://aip.baidubce.com/oauth/2.0/token
• 推荐使用POST
• 需要获取 两个必须参数： API Key 和 Secret Key
• url 的书写格式：‘https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=’ + ‘API Key’ + ‘&client_secret=’ + ‘Secret Key’ + ‘&’,

API Key 和 Secret Key的获取

申请并登录

获取值

access_token 返回值：

• access_token： 要获取的Access Token
• expires_in： Access Token的有效期(秒为单位，一般为1个月)

代码：

 wx.request({
     //发送请求
      url: 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=' + 'fnuWqC5YeWzllFVcL7GpajCK' + '&client_secret=' + 'AFKv8uS5aDvXbcDP6iF73zGTZPLDlwE7' + '&',
      header: {
        'content-type': 'application/json'
      },
      

      success:(res)=> {
        console.log('结果',res)
        // this.userInfo.token = res.data.access_token
          //获取结果token的值
        const access_token = res.data.access_token
        console.log('请求：',access_token)
      }
     )}

api 调用

        //解析图片 并调用百度识别接口
        wx.getFileSystemManager().readFile({
          filePath: tempFilePaths,
          encoding: 'base64',
          success : (res) =>{
            // console.log('请求测试',access_token)
            // console.log('图片测试',res)
            
            wx.request({
              url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/accurate_basic'+'?access_token='+access_token,
              method: 'POST',
              data: {
                //图片的格式
                image:res.data,
                detectorId: 0
            },
              header: {
		            'content-type': 'application/x-www-form-urlencoded'
              },
              success: res=>{
                console.log('结果测试：',res.data.words_result)
                var word = res.data.words_result

                this.setData({
                    //渲染到界面
                  words:word
                })
              }
            })
          }
        })

如此就可以识别出图片中的文字