Responsive Design OCR

express-server/public/ocrscan/cam.js

@@ -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);
 }

express-server/public/ocrscan/ocrscan.js

@@ -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 + "%");
+    }
+    
 }

express-server/public/ocrscan/style.css

@@ -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%;
+}