本文主要介绍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;

}

.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 实现效果

作者: wangwei8638

百度大脑IOCR财会票据识别技术接入小程序,快速实现财会票据识别的更多相关文章

  1. 利用百度AI快速开发出一款“问答机器人”并接入小程序

    先看实现效果: 利用百度UNIT预置的智能问答技能和微信小程序,实现语音问答机器人.这里主要介绍小程序功能开发实现过程,分享主要功能实现的子程序模块,都是干货! 想了解UNIT预置技能调用,请参看我之 ...

  2. vue+uni-app商城实战 | 第一篇:【有来小店】微信小程序快速开发接入Spring Cloud OAuth2认证中心完成授权登录

    一. 前言 本篇通过实战来讲述如何使用uni-app快速进行商城微信小程序的开发以及小程序如何接入后台Spring Cloud微服务. 有来商城 youlai-mall 项目是一套全栈商城系统,技术栈 ...

  3. 如何让微信小程序快速接入七牛云

    如果你确定用七牛运行小程序的话,给大家分享一个九折优惠码:61d1fd4d1 月 9 日 微信小程序正式发布,小程序终于揭开了它神秘的面纱,开发者对小程序的追捧更是热度不减.从小程序的热门应用场景来看 ...

  4. 使用百度大脑iOCR,快速自定义机票行程单模板识别

    1. 功能介绍百度已经推出了iOCR财会票据识别,针对财会报销场景提出的专项解决方案,可对各类财务票据.报销单.银行回单.对账单进行自动分类及结构化识别,并支持用户为固定版式的新票据/单据自定义结构化 ...

  5. 百度大脑UNIT3.0智能对话技术全面解析

    智能客服.智能家居.智能助手.智能车机.智能政务……赋予产品智能对话能力是提升产品智能化体验.高效服务的重要手段,已经开始被越来越多的企业关注并布局.然而,智能对话系统搭建涉及NLP.知识图谱.语音等 ...

  6. 微信小程序(一)基本知识初识别

    最近微信圈里小程序很火的样子,以前小程序刚开始的时候研究了一下,多日没关注发现一些东西都淡忘了,最后决定还是记录下来的好.    毕竟好记星比不上烂笔头嘛~

  7. 微信小程序快速转成百度小程序的方法

    1.安装Node.js(>8.5.0)https://nodejs.org/ npm升级到最新版本的方法:npm install -g npm自动更新到最新版本 2.配置cnpm:在命令行中输入 ...

  8. 汽车Vin码识别——可以嵌入到手机里的新OCR识别技术

              汽车Vin码识别(车架号识别),顾名思义,就是识别汽车的Vin码(车架号),汽车Vin码识别(车架号识别)利用的是OCR识别技术,支持视频流获取图像,自动触发识别,另外汽车Vin码 ...

  9. 3D动态人脸识别技术分析——世纪晟人脸识别实现三维人脸建模

    - 目录 - 国内3D动态人脸识别现状概况 - 新形势下人脸识别技术发展潜力 - 基于深度学习的3D动态人脸识别技术分析 1. 非线性数据建模方法 2. 基于3D变形模型的人脸建模 - 案例结合——世 ...

随机推荐

  1. 深入SQL Server 日期和时间的内部存储

    在SQL Server的内部存储中,日期和时间不是以字符串的形式存储的,而是使用整数来存储的.使用特定的格式来区分日期部分和时间部分的偏移量,并通过基准日期和基准时间来还原真实的数据. 一,DateT ...

  2. UVA439 骑士的移动 Knight Moves

    #include<bits/stdc++.h> using namespace std; char a,c; int b,d; ][]; ]={,,,-,,-,-,-}; ]={,-,,, ...

  3. SpringBoot 整合mongoDB并自定义连接池

    SpringBoot 整合mongoDB并自定义连接池 得力于SpringBoot的特性,整合mongoDB是很容易的,我们整合mongoDB的目的就是想用它给我们提供的mongoTemplate,它 ...

  4. 09-kubernetes configMap secret

    目录 配置容器化应用配置的方式 命令创建和测试configMap 创建一个Pod 挂在测试 命令行文件类创建方式 创建Pod测试 创建后测试 贴近实际进行测试 创建后测试 secret 举例测试 ge ...

  5. U盘安装centos 7 提示 “Warning: /dev/root does not exist

    背景介绍:公司需要使用台式机安装Centos 7.5 系统,来部署一个测试的数据库,在安装Centos 7.5 系统的时候,使用U启安装,但有问题. 提示信息如下 如图:安装centos 7时提示 & ...

  6. MATLAB工具包——curvelet变换的理解(转)

    curvelet下载的curvelet工具包,有以下三个文件:fdct_usfft_matlab.fdct_wrapping_matlab.mecv三个文件夹添加到matlab路径中即可. curve ...

  7. Selenium 4 Java的最佳测试框架

    几十年来,Java一直是开发应用程序服务器端的首选编程语言.尽管JUnit一直在与开发人员一起帮助他们进行自动化的单元测试,但随着时间的推移和测试行业的发展,特别是伴随着自动化测试的兴起,已经开发了许 ...

  8. 一道题反映Java的类初始化过程

    Java的类初始化过程: 1. 父类的static成员变量,static语句块. 2. 子类的static成员变量,static语句块. 3. 父类的普通成员变量,构造函数. 4. 子类的普通成员变量 ...

  9. 微信SDK接入报undefined symbol错误

    按照官方SDK接入 编译后报如下错误 是因为没有link libc++库导致的.

  10. UITableView 实例详解 滑动编辑 headerView

    转自:http://blog.csdn.net/reylen/article/details/8505960 self.dataArray = [[[NSMutableArray alloc]init ...