ISS

dat/0a.json

@@ -1,20 +1,3 @@
 {
-  "max": 3,
-  "S7227U7777777": [
-    "true",
-    "01",
-    "Sanjay Rohith",
-    "IMG001"
-  ],
-  "S7156U8363664": [
-    "false",
-    "02",
-    "Bhrath",
-    "IMG005"
-  ],
-  "S3702": [
-    "true",
-    "03",
-    "STUDENT NAME 3"
-  ]
+  "max":0
 }

script/fetchphotos.js

@@ -4,6 +4,82 @@ imgel.id="imgel"
 imgel.src=direc
 var imgcon = document.getElementById('imgcont');
 imgcon.appendChild(imgel);
+
+var image = document.getElementById('image');
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext("2d");
+canvas.width = image.width;
+canvas.height = image.height;
+ctx.drawImage(image, 
+              0, 0, image.width, image.height,
+              0, 0, canvas.width, canvas.height);
+
+const scale = canvas.width / image.width;
+
+function detect() {
+  if (window.BarcodeDetector == undefined) {
+    var footer = document.getElementsByTagName('footer')[0];
+    footer.innerHTML = "Barcode Detection not supported";
+    console.error('Barcode Detection not supported');
+    return;
+  }
+
+  var barcodeDetector = new BarcodeDetector();
+  barcodeDetector.detect(image)
+    .then(barcodes => {
+      // Draw the boxes on the <canvas>.
+      var ctx = document.getElementById('canvas').getContext("2d");
+      ctx.beginPath();
+      ctx.lineWidth = 2;
+      ctx.strokeStyle = "red";
+      for(var i = 0; i < barcodes.length; i++) {
+        ctx.rect(Math.floor(barcodes[i].boundingBox.x * scale), 
+                 Math.floor(barcodes[i].boundingBox.y * scale),
+                 Math.floor(barcodes[i].boundingBox.width * scale), 
+                 Math.floor(barcodes[i].boundingBox.height * scale));
+        ctx.stroke();
+      }
+      ctx.closePath();
+
+      ctx.beginPath();
+      ctx.strokeStyle = "yellow";
+      for(var i = 0; i < barcodes.length; i++) {
+        ctx.moveTo(Math.floor(barcodes[i].cornerPoints[0].x * scale), 
+                   Math.floor(barcodes[i].cornerPoints[0].y * scale));
+        ctx.lineTo(Math.floor(barcodes[i].cornerPoints[1].x * scale), 
+                   Math.floor(barcodes[i].cornerPoints[1].y * scale));
+        ctx.lineTo(Math.floor(barcodes[i].cornerPoints[2].x * scale), 
+                   Math.floor(barcodes[i].cornerPoints[2].y * scale));
+        ctx.lineTo(Math.floor(barcodes[i].cornerPoints[3].x * scale), 
+                   Math.floor(barcodes[i].cornerPoints[3].y * scale));
+        ctx.lineTo(Math.floor(barcodes[i].cornerPoints[0].x * scale), 
+                   Math.floor(barcodes[i].cornerPoints[0].y * scale));
+        ctx.stroke();
+      }
+      ctx.closePath();
+
+      // Add the barcodes as strings to the <footer>
+      var footer = document.getElementsByTagName('footer')[0];
+      footer.innerHTML = 
+          '<p>Detected ' + barcodes.length + ' barcodes</p><ul>';
+      for(var i = 0; i < barcodes.length; i++) {
+        footer.innerHTML += 
+            '<li>@ (' + barcodes[i].boundingBox.x + ',' + 
+            barcodes[i].boundingBox.y + '), size (' + 
+            barcodes[i].boundingBox.width + 'x' + 
+            barcodes[i].boundingBox.height + ')' + 
+            '; rawValue=' + barcodes[i].rawValue + '</li>';
+      }
+      footer.innerHTML += '</ul>';
+
+    }).catch((e) => {
+      var footer = document.getElementsByTagName('footer')[0];
+      footer.innerHTML = "Boo, Barcode Detection failed: " + e;
+      console.error("Boo, Barcode Detection failed: " + e);
+    })
+}
+
+
 function setimg(newImageUrl) {
         imgel.src = newImageUrl;
 }

test.html

@@ -45,6 +45,11 @@
             <div class="hero">
                 <h1 class="herotext" id="ht">IDA SCUDDER SCHOOL</h1>
                 <p class="herosub">Graduation Day 2024<br>Project Horizon - AI Face Recognition</p>
+                <button id="detect" onclick="detect()"  class="btn btn-lg btn-primary">Detect barcodes</button>
+<div>
+<img hidden id="image" crossorigin="anonymous" src="https://upload.wikimedia.org/wikipedia/en/f/f4/LiveBarcodeApp.jpg"> <br>
+<canvas id="canvas" width=320 height=320>
+</div>
                 <div class="photodisp">
                     <input type="text" class="uid" id="inp" minlength="4" maxlength="7" size="30%" placeholder="Admission Number">
                     <input type="text" class="uid" id="inp2" minlength="7" maxlength="8" size="30%" placeholder="Unique ID">