小程序開發 - 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小程序體驗：