スマホでOCR読み取りに良い方法は？
解決したいこと
レシートをスマホカメラで読み取り、日付と金額をOCRしたいです。
以下の記事を元にサイトを作成しましたが、読み取り精度が悪いく、実用に耐えられないと思いました。
https://qiita.com/tinymouse/items/ec3a6dfae0b334c95894
※記事の内容のせいではなくて、私やtesseract.jsのせいかもしれません。
もしかしたら、パイソンなど、より精度の良い方法があるのでしょうか？
具体的なこんなサイトだったらと思うのは、
1)カメラでレシートを撮影
2)特定の位置（日時、金額）を読み取り、別ページに遷移
3)間違いが無いか確認して、間違いが無ければそのままDBに保存する。間違いがあれば修正してDBに保存する。
4)1に戻り、連続して読み取る。
というものです。
アドバイスのほどよろしくお願い致します。
作成したサイト
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Camera Test</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<canvas id="canvas"></canvas>
<p id="result">result</p>
</body>
<script src="https://unpkg.com/tesseract.js@4.0.1/dist/tesseract.min.js"></script>
<script src="js/main.js"></script>
</html>
styles.css
body {
font-family: Arial, sans-serif;
}
#canvas {
width: 100%;
height: auto;
}
#result {
background-color: skyblue;
font-size: 32px;
}
main.js
var video = document.createElement('video');
video.autoplay = true;
video.muted = true;
video.playsInline = true;
var canvas = document.querySelector('#canvas');
navigator.mediaDevices.getUserMedia({
video: {
facingMode: { exact: "environment" }
},
audio: false
})
.then(function(stream){
video.srcObject = stream;
video.play();
var isRecognizing = false;
setInterval(function(){
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, 0, 0, canvas.width, canvas.height);
// 四角を描画
var box = {
x: 50,
h: 100
};
box.y = (canvas.height - box.h) / 2;
box.w = (canvas.width - box.x * 2);
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.lineWidth = 2;
ctx.rect(
box.x, box.y, box.w, box.h
);
ctx.stroke();
// 別のCanvasにコピー
var buf = document.createElement('canvas');
document.body.append(buf);
ctx.stroke();
buf.width = box.w;
buf.height = box.h;
buf.getContext('2d').drawImage(canvas, box.x, box.y, box.w, box.h, 0, 0, box.w, box.h);
if (isRecognizing) return;
isRecognizing = true;
// 読み取り
Tesseract.recognize(
buf,
'eng',
{
logger: function(e) {
document.querySelector('#progress').textContent = e.status;
}
}
)
.then(function(result){
document.querySelector('#result').textContent = result.data.text;
isRecognizing = false;
});
}, 200);
})
.catch(function(e){
document.querySelector('#result').textContent = JSON.stringify(e);
});
追記１）iOS+Chromeで動作を確認しています。
0 likes