起因
為了實現在報銷流程中，發票不能重用的限制，發票上傳后，希望能讀出發票號，并記錄發票號已用，下次不再可用于報銷。
基于上面的需求，研究了OCR 的方式和讀PDF的方式，實際是可行的，但是因為都是使用了本地化的組件庫，只能在服務器端實現。對于目前 OA 流程的使用并不方便。又研究了一下 JS 的處理辦法，找到了兩個腳本庫，可以使用。jsQR.js?和 pdf.js ，可以通過識別發票里的二維碼間接取到發票號。
下面做了兩個簡單使用的例子，驗證的可行性。記錄一下備用。
實例1 存圖片模式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>讀發票的二維碼信息-圖片版</title><script src="https://cozmo.github.io/jsQR/jsQR.js"></script>
</head>
<body>
<div style="height: 300px">點擊圖片識別圖中二維碼信息</div>
<img id="img1" alt="QR Code" onload="showqr()" onclick="showqr()">
</body>
<script>const picfUrl = './fapiao.png'; // 替換為你的 發票 圖片 文件路徑function showqr(){const canvas = document.createElement('canvas');const context = canvas.getContext('2d');canvas.width = img1.width;canvas.height = img1.height;context.drawImage(img1, 0, 0);const imageData = context.getImageData(0, 0, canvas.width, canvas.height);const code = jsQR(imageData.data, imageData.width, imageData.height);alert(code.data);}img1.src=picfUrl
</script>
</html>實例2 PDF格式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>讀發票二維碼信息-pdf版</title><script src="https://cozmo.github.io/jsQR/jsQR.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
</head>
<body>
<div style="height: 300px">點擊圖片識別圖中二維碼信息</div>
<img id="img1" alt="QR Code" onclick="showqr()" onload="showqr()">
<script>const pdfUrl = './fapiao.pdf'; // 替換為你的 發票 PDF 文件路徑// 加載 PDF 文件pdfjsLib.getDocument(pdfUrl).promise.then(pdfDoc => {console.log(`PDF 文件加載成功，共 ${pdfDoc.numPages} 頁`);renderPage(pdfDoc, 1); //測試只取第一頁內容});// 渲染指定頁碼的函數function renderPage(pdfDoc, pageNumber) {pdfDoc.getPage(pageNumber).then(page => {const scale = 1; // 放大，可以增加二維碼清晰度const viewport = page.getViewport({scale});// 創建 canvas 元素const canvas = document.createElement('canvas');const context = canvas.getContext('2d');canvas.width = viewport.widthcanvas.height = viewport.height;//img1.width = viewport.width;//img1.height = viewport.height;// 渲染 PDF 頁面到 canvasconst renderContext = {canvasContext: context,viewport};page.render(renderContext).promise.then(() => {const imageData = canvas.toDataURL('image/png');img1.src = imageData;});});};function showqr() {const canvas = document.createElement('canvas');const context = canvas.getContext('2d');context.drawImage(img1, 0, 0);const imageData = context.getImageData(0, 0, canvas.width, canvas.height);console.log(imageData)const code = jsQR(imageData.data, imageData.width, imageData.height);alert(code.data);}
</script>
</body>
</html>
才生效的原因)
![simulink有無現成模塊可以實現將三個分開的輸入合并為一個[1*3]的行向量輸出？](http://pic.xiahunao.cn/simulink有無現成模塊可以實現將三個分開的輸入合并為一個[1*3]的行向量輸出？)
數組乘積)
