dergeorg/SmartShopper
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Responsive Design OCR

Browse Source
This commit is contained in:
LukasNowy 2019-01-18 00:32:18 +01:00
parent 4cb86a2f2a
commit 40ddeb8b28
4 changed files with 32 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
express-server/public/ocrscan/cam.js
View File

@ -31,5 +31,5 @@ function throwError(error) {
function snap() {
canvas.width = video.clientWidth;
canvas.height = video.clientHeight;
canvas.getContext("2d").drawImage(video, 0, 0);
canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
}

16
express-server/public/ocrscan/ocrscan.js
View File

@ -8,20 +8,30 @@ $(document).ready(function() {
});
});
var loading = false;
function analyze() {
var img = document.getElementById("canvas").toDataURL();
Tesseract.recognize(img).progress((progress) => {
console.log(progress, "$$$$");
if (progress.status == "recognizing text") {
$(".determinate").css("width", progress.progress * 100 + "%");
loading = true;
}
}).then((result) => {
console.log(result);
loading = false;
$(".output").text(result.text);
$('.modal').modal("open");
$(".determinate").css("width", "0%");
});
}
setInterval(updateProgress(), 500);
function updateProgress(percent) {
if(loading == true) {
$(".determinate").css("width", progress.progress * 100 + "%");
}
}

11
express-server/public/ocrscan/style.css
View File

@ -1,12 +1,17 @@
body {
background-color: #b3e5fc;
background-color: #fafafa;
}
.cont1 {
background-color: #424242;
margin-top: 1em;
padding-top: 10px;
}
.cont2 {
margin-top: 0px;
#video {
width: 100%;
}
#canvas {
width: 100%;
}

20
express-server/views/ocrscan.ejs
View File

@ -24,28 +24,28 @@
<body>
<div class="container cont1">
<div class="container cont1 z-depth-4">
<div class="row">
<div class="col s6">
<div class="col s12 m12 l6">
<center><video id="video"></video></center>
</div>
<div class="col s6">
<div class="col s12 m12 l6">
<center><canvas id="canvas"></canvas></center>
</div>
<div class="col s12">
<a class="waves-effect waves-light btn-large btnsnap light-blue accent-3"><i class="material-icons left">camera</i>Take Snapshot!</a>
<a class="waves-effect waves-light btn-large btnanalyze green accent-4"><i class="material-icons left">arrow_forward</i>Continue</a>
<center><a class="waves-effect waves-light btn-large btnsnap light-blue accent-3"><i class="material-icons left">camera</i>Take Snapshot!</a>
<a class="waves-effect waves-light btn-large btnanalyze green accent-4"><i class="material-icons left">arrow_forward</i>Continue</a></center>
</div>
</div>
</div>
<div class="container cont2">
<div class="progress grey lighten-1">
<div class="determinate green accent-4" style="width: 0%"></div>
<div class="col s12">
<div class="progress grey lighten-1">
<div class="determinate green accent-4" style="width: 0%"></div>
</div>
</div>
</div>
</div>