小程序开发 - OCR 快速识别文字

利用周末时间开发一个简单的图片文字识别小程序应用，虽然简单也是经历个很多个坑，把爬坑经过分享给大家，希望对你有帮助

微信小程序 -> 搜索 -> 快速识别文字

• 服务端 - 购买域名、服务器、搭建后台开发接口
• 学习小程序官方开发文档

一、先来几张效果图

识别结果：

直接上代码，贴出主要的代码段

主界面xml：

<!--pages/my.wxml-->
<view>
  <view class="my_container">
    <image class="my_ocr_image" src="../../imgs/bg_index_top.jpg" mode="aspectFill"></image>
    <text wx:if="{{false}}" class="repeat-text" bindtap="repeatParse">重新解析</text>
    <label class="my_ocr_head">请选取图片进行文字提取</label>
    <view class="ctrl-container">
      <van-button bind:click="pickMessageImage" class="ctrl_btn" color="#F3E73A" type="info" customStyle="color:#000;" plain>聊天记录选图</van-button>
      <van-button bind:click="pickImage" color="#F3E73A" class="ctrl_btn" customStyle="color:#000;" plain>相册选图/拍照</van-button>
    </view>
  </view>
  <view wx:if="{{ isShowGuide }}" class="guide-container">
    <image class="guide_image" src="../../imgs/guide_img.jpg"></image>
    <van-button bind:click="hideGuide" class="guide_text" color="#F3E73A" type="info" customStyle="border-radius: 20px;color:#fff;background-color: rgba(255, 255, 255, 0);margin-top:10px;" plain>我知道了</van-button>
  </view>
</view>

选取聊天记录和相册拍照的js代码

//选取聊天记录的图片
  pickMessageImage: function() {
    var self = this
    wx.chooseMessageFile({
      count: 1,
      type: 'image',
      success(res) {
        console.log(JSON.stringify(res))
        if (res.tempFiles.length > 0) {
          self.parseImage(res.tempFiles[0].path)
        }
      },
      fail() {

      }
    })
  },
  //选取相册图片或拍照
  pickImage: function() {
    var self = this
    wx.getSetting({
      success(res) {
        //获取摄像头权限
        if (res.authSetting['scope.camera']) {
          wx.chooseImage({
            count: 1,
            sizeType: ['original', 'compressed'],
            sourceType: ['album', 'camera'],
            success: function(res) {
              console.log('success:' + JSON.stringify(res))
              if (res.tempFiles.length > 0) {
                self.parseImage(res.tempFiles[0].path)
              }

            },
            fail: function(res) {
              console.log('fail:' + JSON.stringify(res))

            },
            complete: function(res) {

            },
          })
        } else {
          wx.navigateTo({
            url: '/pages/permiss/permiss',
          })
        }
      },
      fail(err) {
        wx.navigateTo({
          url: '/pages/permiss/permiss',
        })
      }
    })

扫码体验：

QQ小程序体验：