【使用攻略】+【iOCR】

本文主要介绍iOCR财会票据识别的小程序功能实现。

想了解微信小程序的开发过程，请参看我之前的帖子：《UNIT接入小程序》https://ai.baidu.com/forum/topic/show/953022

想了解iOCR财会票据识别的调用过程，请参看我之前的帖子：《报账票据快速录入》https://ai.baidu.com/forum/topic/show/955800

1 系统框架

用到的技术主要有：百度iOCR财会票据识别和微信小程序。小程序将用户上传的图片提交给百度iOCR财会票据识别服务，进行自动分类及结构化识别。全部功能都在小程序客户端完成，不需要服务器，适合个人开发者学习调试使用，同时也为商业应用提供相应解决方案。

2 创建小程序项目

在根目录的全局配置文件app.json中增加："pages/ iOCR / iOCR " ，会自动创建相关页面文件，结构如下：

iOCR.js：功能逻辑模块

iOCR.wxss：页面样式文件

iOCR.wxml：页面布局文件

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: 微软雅黑;

  width: 100%;

  height: 50px;

  vertical-align: middle;

  text-align: center;

  line-height: 45px;

  border-radius: 5px;

  background-color: rgb(128, 207, 247);

}

.img_wrap {

    margin-bottom: 10px;

    width: 750rpx;

    height: 500rpx;

    background: #ececec;

}

.result{

  font-size: 32rpx;

  color: #fa4627;

  border-top: 1rpx solid #eeeeee;

  margin:30rpx 20rpx 0rpx 20rpx;

  padding: 10rpx;

}

4 实现效果

5 欢迎扫码体验