本文主要介紹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: 微軟雅黑;
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