微信小程序整合百度文字识别OCR

本文介绍

​ 之前有过一点小程序的学习，并最近写的项目有用到识别图片中的文字的场景，但是又不想花钱，就千方百计的找白嫖资源，经过一天的折磨，终于找到了白嫖的方法(百度智能云)，虽说是白嫖，但也是有次数限制的，千万不要以为是真的白嫖，相对于其他的公司的同类产品这个已经很良心了，这个次数对于自己的开发和使用来说绰绰有余。请配合图文一起看，本文是分享自己的经验和记录自己的成长，有误欢迎指出，但是勿喷！

效果图

准备工作（先创建百度OCR应用）

悄悄的说一句，为了防止图片失效，所以在介绍的时候使用文字加图片的形式描述，不要闲啰嗦哦~

需要先注册或登录百度智能云

在登录成功后找到产品服务栏目

选择人工智能栏目的文字识别板块

第一次进入时，应用应该是0个，接下来就是准备点击创建应用按钮进行OCR文字识别应用的创建

根据要求和提示填写对应的信息即可，填写完毕后点击 立即创建

创建了OCR应用后就可以在应用列表中看到刚刚创建的OCRDemo应用了，APIKey和SecretKey不能公开的出来的，类似于你的支付宝账号和密码，你懂的！

点击应用名称就可以查看应用的详细信息，还可以查看应用的使用文档和教学视频，感兴趣的小盆友可以研究一下

点击查看文档介绍和使用的要求以及注意的事项

该接口有两种调用的方式，一种是URL夹带参数格式，另一种是HTTP请求体格式

在这里我选择第一种URL夹带参数请求方式

图片的编码需要是base64编码，并且有4M的大小限制

OCR的准备工作就完成了

开发工具配置

为了方便我们的开发和调用第三方OCR，我们需要勾选微信开发工具里的 不校验合法域名… 来使我们愉快的使用该API接口

如果你的小程序需要上线的话，还需要去微信公众平台去配置request合法域名，在 开发----->服务器域名 中，点击修改，配置request合法域名，填写（https://aip.baidubce.com）此接口即可，如果不用上线请忽略此操作！

具体实现代码

不多bb，直接开搞

wxml

<view>
  <button type="warn" bindtap="picToTxt">请选择图片</button>
</view>
<block wx:for="{{words}}" wx:key="unique" >
  <view style="text-align: center">{{item.words}}</view>
</block>

js

Page({
  data: {
    words: []
  },
  picToTxt() {
    const that = this
    wx.chooseImage({
      success: (res) => {
        //获取图片的临时路径
        const tempFilePath = res.tempFilePaths[0]
        //根据官方的要求  用base64字符编码获取图片的内容
        wx.getFileSystemManager().readFile({
          filePath: tempFilePath,
          encoding: 'base64',
          success: function (res) {
            //调用方法
            that.getImgInfo(res.data)
          },
        })
      },
    })
  },
  //根据图片的内容调用API获取图片文字
  getImgInfo: function (imageData) {
    wx.showLoading({
      title: '识别中...',
    })
    var that = this
    that.getBaiduToken().then(res => {
      console.log(res)
      //获取token
      const token = res.data.access_token
      console.log(token)
      const detectUrl = `https://aip.baidubce.com/rest/2.0/ocr/v1/general_basic?access_token=${token}` // baiduToken是已经获取的access_Token      
      wx.request({
        url: detectUrl,
        data: {
          image: imageData
        },
        method: 'POST',
        dataType: 'json',
        header: {
          'content-type': 'application/x-www-form-urlencoded' // 必须的        
        },
        success: function (res, resolve) {
          console.log(res)
          //将 res.data.words_result数组中的内容加入到words中           
          that.setData({
            words: res.data.words_result
          })
          console.log('识别后： ' + res.data.words_result)
          wx.hideLoading()
        },
        fail: function (res, reject) {
          console.log('get word fail：', res.data);
          wx.hideLoading()
        },
        complete: function () {
          wx.hideLoading()
        }
      })
    })
  },
  // 获取百度access_token  
  getBaiduToken: function () {
    return new Promise(resolve => {
      var APIKEY = "填写你的APIKEY"
      var SECKEY = "填写你的SECKEY"
      var tokenUrl = `https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=${APIKEY}&client_secret=${SECKEY}`
      var that = this;
      wx.request({
        url: tokenUrl,
        method: 'POST',
        dataType: 'json',
        header: {
          'content-type': 'application/json; charset-UTF-8'
        },
        success: function (res) {
          console.log("[BaiduToken获取成功]", res);
          return resolve(res)
        },
        fail: function (res) {
          console.log("[BaiduToken获取失败]", res);
          return resolve(res)
        }
      })
    })
  }
})

结束语

保姆级教程，麻烦点个赞！有误请指！不喜勿喷！

生命不息，编程不止！奥利给！！！