调用百度智能云OCR识别医疗检验单（一）

前言

   小程序云开发开通了很多自带的OCR能够实现文字识别，但内容相当有限。在小程序开发过程中，需求是多种多样的，经常需要调用外接口来实现文字识别的功能。在医疗行业中，为了对检查数据进行数据可视化分析，需要自动文字识别检验单，并上传到数据库。针对此需求，撰写此文，与大家共同学习，共同提升。

一、百度云OCR是什么？

       百度AI提供的OCR服务是百度AI开放平台提供的众多AI在线服务之一，其功能极其丰富，包括通用文字识别、汽车场景文字识别、财务票据、各类卡证等面向不同场景的文字识别服务。内容非常丰富。今天主要介绍下通过在线api调用接口实现文字识别的方式。

二、使用步骤

1.开通百度云OCR应用

网上此类内容很多，开通也比较简单。开通完成后，会得到如下所示的两个重要信息，在小程序js文件中作为网络请求使用。

2.源代码

重要提醒：将https://aip.baidubce.com添加到小程序的可信任网络中。

ocr.wxml

<!-- 识别按钮 -->
<view class="checkTime">
    <input type="text" class="checkTimeInput" bindinput="checkTime" placeholder="请输入检查日期,如：20220228" maxlength="8" placeholder-class="myplaceholder"/> 
</view>
<view class="btnBox">
    <button bindtap="doUpload">点击上传检验单</button>
</view>
<view class="btnBox">
    <button bindtap="addDataToBackend">点击上传数据到后台</button>
</view>
<!-- 识别的图片 -->
<view class="imgBox">
    <image src="data:image/png;base64,{{imageUrl}}" mode="aspectFit" />
</view>
<!-- 识别出来的内容 -->
<view class="scan-list">识别结果：</view>
<view class="scan-list-title">
  <text>名称</text>
  <text>结果</text>
  <text>单位</text>
  <text>参考区间</text> 
</view>
<block wx:for="{{Item}}">
  <view class="contantBox">
      <text>{{item[7].word}}</text>
      <text>{{item[4].word}}</text>
      <text>{{item[1].word}}</text>
      <text>{{item[2].word}}</text>
  </view>
</block>
<!-- 下方留白 -->
<view class="end-block"></view>

ocr.js

// 获取百度access_token  
  getBaiduToken: function () {
    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}`; //调用百度云api接口
    var that = this; //防止this指向问题
    // 发送请求
    wx.request({
      url: tokenUrl,
      method: 'POST',
      dataType: 'json',
      header: {
        'content-type': 'application/json; charset-UTF-8'
      },
      // 返回数据
      success: function (res) {
        that.setData({
          baiduToken: res.data.access_token
        })
      },
      // 错误信息
      fail: function (res) {
        console.log("[BaiduToken获取失败]", res);
      }
    })
  },
  // 百度ORC接口调用  
  scanImageInfo: function (imageData) { // 将图片转换成base64格式
    var that = this; //防止this指向问题
    const detectUrl = `https://aip.baidubce.com/rest/2.0/ocr/v1/medical_report_detection?access_token=${that.data.baiduToken}` // 调用百度云api接口并传递baiduToken
    
    return new Promise(function (resolve, reject) {
      // 发送请求
      wx.request({
        url: detectUrl,
        data: {
          image: imageData
        },
        method: 'POST',
        dataType: 'json',
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        // 返回数据
        success: function (res, resolve) {
          var dataList = res.data.words_result
          console.log(res.data.words_result.CommonData[0].word, "识别内容");
          // 赋值给data中定义的变量
          that.setData({
            CommonData: dataList.CommonData,
            Item:dataList.Item  //根据自己的需求，将识别结果赋值给数组
          })
        },
        // 错误信息
        fail: function (res, reject) {
          console.log('get dataList fail：', res.data);
        },

      })
    })
  },

该处使用的url网络请求的数据。

3. 结果示例

---

 

总结

  以上就是今天要讲的内容，本文简单介绍了百度云OCR在小程序中的调用，实现医疗检验单识别。