本文主要介紹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 = https://www.cnblogs.com/AIBOOM/p/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
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/7249.html
標籤：其他
上一篇：利用百度AI快速開發出一款“問答機器人”并接入小程式
下一篇：軟體工程與軟體危機