【百度大脑CV主题月征稿计划】AI小程序之增值税
0
收藏
最后编辑于2022-04
识别并结构化返回增值税发票的各个字段及其对应值，包含了发票基础信息9项，货物相关信息12项，共30项结构化字段。本文主要介绍增值税发票识别的小程序功能实现。
想了解微信小程序的开发过程，请参看我之前的帖子：《UNIT接入小程序》https://ai.baidu.com/forum/topic/show/953022
想了解增值税发票识别的调用过程，请参看我之前的帖子：《增值税发票识别》https://ai.baidu.com/forum/topic/show/943375
1 系统框架
用到的技术主要有：百度增值税发票识别和微信小程序。小程序将用户上传的图片提交给百度增值税发票识别服务，返回发票相关信息。全部功能都在小程序客户端完成，不需要服务器，适合个人开发者学习调试使用，同时也为商业应用提供相应解决方案。
2创建小程序项目
在根目录的全局配置文件app.json中增加："pages/ vatInvoice/ vatInvoice " ，会自动创建相关页面文件，结构如下：
vatInvoice.js：功能逻辑模块
vatInvoice.wxss：页面样式文件
vatInvoice.wxml：页面布局文件
vatInvoice.json：页面配置文件
3 调用增值税发票识别API
3.1 首先要在控制台创建应用，调用增值税发票识别API，“获取API Key/Secret Key”。
接口文档地址：https://ai.baidu.com/docs#/OCR-API-VatInvoice/top
请求URL: https://aip.baidubce.com/rest/2.0/ocr/v1/vat_invoice
Body中放置请求参数，参数详情如下：
返回示例：
{
"log_id": "5425496231209218858",
"words_result_num": 29,
"words_result": {
"InvoiceNum": "14641426",
"SellerName": "上海易火广告传媒有限公司",
"CommodityTaxRate": [
{
"word": "6%",
"row": "1"
}
],
"SellerBank": "中国银行南翔支行446863841354",
"Checker": ":沈园园",
"TotalAmount": "94339.62",
"CommodityAmount": [
{
"word": "94339.62",
"row": "1"
}
],
"InvoiceDate": "2016年06月02日",
"CommodityTax": [
{
"word": "5660.38",
"row": "1"
}
],
"PurchaserName": "百度时代网络技术(北京)有限公司",
"CommodityNum": [
{
"word": "",
"row": "1"
}
],
"PurchaserBank": "招商银行北京分行大屯路支行8661820285100030",
"Remarks": "告传",
"Password": "074/45781873408>/6>8>65*887676033/51+<5415>9/32--852>1+29<65>641-5>66<500>87/*-34<943359034>716905113*4242>",
"SellerAddress": ":嘉定区胜辛南路500号15幢1161室55033753",
"PurchaserAddress": "北京市海淀区东北旺西路8号中关村软件园17号楼二属A2010-59108001",
"InvoiceCode": "3100153130",
"CommodityUnit": [
{
"word": "",
"row": "1"
}
],
"Payee": ":徐蓉",
"PurchaserRegisterNum": "110108787751579",
"CommodityPrice": [
{
"word": "",
"row": "1"
}
],
"NoteDrawer": "沈园园",
"AmountInWords": "壹拾万圆整",
"AmountInFiguers": "100000.00",
"TotalTax": "5660.38",
"InvoiceType": "专用发票",
"SellerRegisterNum": "913101140659591751",
"CommodityName": [
{
"word": "信息服务费",
"row": "1"
}
],
"CommodityType": [
{
"word": "",
"row": "1"
}
]
}
}3.2 增值税发票识别功能实现
（1）发送URL请求核心代码
//在baiduai.js中发送URL请求，并进行封装。
//增值税发票识别接口请求，此处添加
let vat_invoiceUrl = 'https://aip.baidubce.com/rest/2.0/ocr/v1/vat_invoice';
let vat_invoiceRequest = (base64Img, callback) => {
var accessToken = app.globalData.access_token;
//拼接接口body参数
let params = {
image: base64Img,
detectorId: 0
}
//发送接口请求
wx.request({
url: vat_invoiceUrl + '?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()
}
})
}
(2)定义按钮点击事件
//在businessLicense.js中定义定义按钮点击事件
//按钮点击事件
uploads: function () {
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.vat_invoiceRequest(res.data, {
success(res) {
if (res.data != '') {
wx.hideLoading();
var text = '';
text += "\n";
var list = [];
var list = res.words_result;
var len = res.words_result_num;
console.info(list);
//遍历打印字典元素
for (var key in list) {
text += key + ":" + list[key]+ "\n";
console.info(key + ":" + list[key]);
}
/* for (var j = 0; j < len; j++) {
text += list[j]['words'] + "\n";
console.info(text);
} */
that.setData({
output: text
})
} else {
wx.hideLoading();
wx.showModal({
showCancel: false,
title: '温馨提示',
content: '貌似没有识别出结果'
})
}
}
})
}
})
},
})
},(3)修改页面样式文件
/* pages/businessLicense/businessLicense.wxss */
.image {
width: 100%;
height: 360rpx;
}
.container {
margin-top: -110px;
background-repeat: no-repeat;
background-size: auto;
background-position: bottom;
background-position-x: right;
}
button {
font-family: 微软雅黑;
}
.page-body-info {
display: flex;
box-sizing: border-box;
padding: 30rpx;
height: 420rpx;
border-top: 1rpx solid #d9d9d9;
border-bottom: 1rpx solid #d9d9d9;
align-items: center;
justify-content: center;
}
.atbottom {
width: 100%;
height: 50px;
display: flex;
flex-direction: row;
justify-content: center;
position: fixed;
background: #3366FF;
bottom: 0;
}
.img_wrap {
margin-bottom: 10px;
width: 750rpx;
height: 550rpx;
background: #ececec;
}
image {
width: 100%;
height: 100%;
max-height: 1
}
.msg {
margin: 10px 0;
text-align: center;
}
.table {
margin-top: 10rpx;
border: 0px solid darkgray;
width: 100%;
}
.tr {
display: flex;
width: 100%;
justify-content: center;
height: 80rpx;
}
.td {
font-family: 微软雅黑;
font-size: 28rpx;
width:100%;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
}
.bg-g{
background: white;
}
.result{
font-size: 32rpx;
color: #fa4627;
border-top: 1rpx solid #eeeeee;
margin:30rpx 20rpx 0rpx 20rpx;
padding: 10rpx;
}
.th {
font-size: 28rpx;
width: 48%;
justify-content: center;
background: #3366FF;
color: #fff;
display: flex;
height: 80rpx;
align-items: center;
}4 实现效果
收藏
点赞
0
个赞
请登录后评论
TOP
切换版块
欢迎扫描体验
很快很准确
提取增值税发票信息