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() { function snap() {
canvas.width = video.clientWidth; canvas.width = video.clientWidth;
canvas.height = video.clientHeight; 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() { function analyze() {
var img = document.getElementById("canvas").toDataURL(); var img = document.getElementById("canvas").toDataURL();
Tesseract.recognize(img).progress((progress) => { Tesseract.recognize(img).progress((progress) => {
console.log(progress, "$$$$");
if (progress.status == "recognizing text") { if (progress.status == "recognizing text") {
$(".determinate").css("width", progress.progress * 100 + "%"); loading = true;
} }
}).then((result) => { }).then((result) => {
console.log(result); loading = false;
$(".output").text(result.text); $(".output").text(result.text);
$('.modal').modal("open"); $('.modal').modal("open");
$(".determinate").css("width", "0%"); $(".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 { body {
background-color: #b3e5fc; background-color: #fafafa;
} }
.cont1 { .cont1 {
background-color: #424242; background-color: #424242;
margin-top: 1em;
padding-top: 10px;
} }
.cont2 { #video {
margin-top: 0px; width: 100%;
} }
#canvas {
width: 100%;
}

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

@ -24,30 +24,30 @@
<body> <body>
<div class="container cont1"> <div class="container cont1 z-depth-4">
<div class="row"> <div class="row">
<div class="col s6"> <div class="col s12 m12 l6">
<center><video id="video"></video></center> <center><video id="video"></video></center>
</div> </div>
<div class="col s6"> <div class="col s12 m12 l6">
<center><canvas id="canvas"></canvas></center> <center><canvas id="canvas"></canvas></center>
</div> </div>
<div class="col s12"> <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> <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> <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>
<div class="container cont2"> <div class="col s12">
<div class="progress grey lighten-1"> <div class="progress grey lighten-1">
<div class="determinate green accent-4" style="width: 0%"></div> <div class="determinate green accent-4" style="width: 0%"></div>
</div> </div>
</div> </div>
</div>
</div>
<!-- Modal Structure --> <!-- Modal Structure -->