百度大腦IOCR財會票據識別技術接入小程序，快速實現財會票據識別

時間 2019-11-07

標籤百度大腦 iocr 財會票據識別技術程序快速實現简体版

原文原文鏈接

本文主要介紹iOCR財會票據識別的小程序功能實現。json

想了解微信小程序的開發過程，請參看我以前的帖子：《UNIT接入小程序》https://ai.baidu.com/forum/topic/show/953022小程序

想了解iOCR財會票據識別的調用過程，請參看我以前的帖子：《報帳票據快速錄入》https://ai.baidu.com/forum/topic/show/955800微信小程序

1 系統框架api

用到的技術主要有：百度iOCR財會票據識別和微信小程序。小程序將用戶上傳的圖片提交給百度iOCR財會票據識別服務，進行自動分類及結構化識別。所有功能都在小程序客戶端完成，不須要服務器，適合我的開發者學習調試使用，同時也爲商業應用提供相應解決方案。服務器

2 建立小程序項目微信

在根目錄的全局配置文件app.json中增長："pages/ iOCR / iOCR " ，會自動建立相關頁面文件，結構以下：app

iOCR.js：功能邏輯模塊框架

iOCR.wxss：頁面樣式文件xss

iOCR.wxml：頁面佈局文件ide

iOCR.json：頁面配置文件

3 調用iOCR財會票據識別API

3.1 首先要在控制檯建立應用，調用iOCR財會票據識別API，「獲取API Key/Secret Key」。

接口文檔地址：https://ai.baidu.com/docs#/ImageProcessing-API/824a761a

請求URL: https://aip.baidubce.com/rest/2.0/image-process/v1/style_trans

Body中放置請求參數，參數詳情以下：

返回參數：

3.2 iOCR財會票據識別功能實現

（1）發送URL請求核心代碼

//在baiduai.js中發送URL請求，並進行封裝。

let iocrUrl = 'https://aip.baidubce.com/rest/2.0/solution/v1/iocr/recognise/finance';

//iOCR識別接口

let iOCRRequest = (base64Img, callback) => {

  var accessToken = app.globalData.access_token;

  //拼接接口body參數

  let params = {

    image: base64Img, //圖片base64

    detectorId: 0

  }

  //發送接口請求

  wx.request({

    url: iocrUrl + '?access_token=' + accessToken,

    data: params,

    header: {

      'content-type': 'application/x-www-form-urlencoded'

    },

    method: 'POST',

    success: function (res) {

      callback.success(res.data)

    },

    fail: function (res) {

      if (callback.fail)

        callback.fail()

    }

  })

}

//暴露出去的接口

module.exports = {

  iOCRRequest: iOCRRequest,

  getIocrToken: getIocrToken

}

(2)定義按鈕點擊事件

//在iOCR.js中定義定義按鈕點擊事件

  uploads: function () {

    api.getIocrToken();

    var that = this

    wx.chooseImage({

      count: 1, // 默認9

      sizeType: ['compressed'], // 能夠指定是原圖仍是壓縮圖，默認兩者都有

      sourceType: ['album', 'camera'], // 能夠指定來源是相冊仍是相機，默認兩者都有

      success: function (res) {

        // 返回選定照片的本地文件路徑列表，tempFilePath能夠做爲img標籤的src屬性顯示圖片

        if (res.tempFiles[0].size > 4096 * 1024) {

          wx.showToast({

            title: '圖片文件過大',

            icon: 'none',

            mask: true,

            duration: 1500

          })

        } else {

          that.setData({

            img: res.tempFilePaths[0]

          })

        }

        wx.showLoading({

          title: "分析中...",

          mask: true

        })

        //根據上傳的圖片讀取圖片的base64

        var fs = wx.getFileSystemManager();

        fs.readFile({

          filePath: res.tempFilePaths[0].toString(),

          encoding: 'base64',

          success(res) {

            //獲取到圖片的base64 進行請求接口

            api.iOCRRequest(res.data, {

              success(res) {

                  if (res.data != '') {

                    wx.hideLoading();

                    var text = '';

                    text += "\n";

                    var list1 = res.data.ret;

                    var len1 = list1.length;

                    for (var i = 0; i < len1; i++) {

                      var list2 = list1[i].ret;

                      var len2 = list2.length;

                      text += "發票類型:" + list1[i].templateSign + "\n";

                      text += "置信度:" + list1[i].scores + "\n";



                      for (var j = 0; j < len2; j++) {

                        text += list2[j].word_name + ":" + list2[j].word  + "\n"; 

                            console.info(list2[j].word_name + ":" + list2[j].word );

                      }

                      text += "\n";

                      console.info("\n");

                    }

                    let data = text;

                    that.setData({

                      output: data

                    })

                  } else {

                    wx.hideLoading();

                    wx.showModal({

                      showCancel: false,

                      title: '舒適提示',

                      content: '沒有識別出結果'

                    })

                  }

              }

            })

          }

        })

      },

    })

  },

(3)修改頁面樣式文件 iOCR.wxss

.container {

margin-top: -110px;

background-repeat: no-repeat;

background-size: auto;

background-position: bottom;

background-position-x: right;

}

.up {

color: rgb(255, 255, 255);

font-size: 20px;

font-family: 微軟雅黑;