起因
为了实现在报销流程中，发票不能重用的限制，发票上传后，希望能读出发票号，并记录发票号已用，下次不再可用于报销。
基于上面的需求，研究了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.width
canvas.height = viewport.height;
//img1.width = viewport.width;
//img1.height = viewport.height;
// 渲染 PDF 页面到 canvas
const 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>
