feat: crop uploaded images based on text location

Author: felixindrawan

css/index.css

@@ -238,7 +238,7 @@ img {
   display: none;
 }
 
-.scanner-container .header .upload-menu-btn {
+.scanner-container .header .upload-img-btn {
   width: 30px;
   height: 30px;
   cursor: pointer;
@@ -247,59 +247,11 @@ img {
   cursor: pointer;
 }
 
-.scanner-container .header .upload-menu-icon {
+.scanner-container .header .upload-img-icon {
   width: 24px;
   height: 24px;
 }
 
-.scanner-container .header .upload-menu-list {
-  position: absolute;
-  top: 54px; /* Header height 46px + triangle 8px*/
-  left: 70px;
-  background-color: #000000;
-  z-index: 3;
-  display: none;
-  border-right: #aaaaaa;
-}
-
-/* Tooltip Triangle */
-.scanner-container .header .upload-menu-list::after {
-  content: "";
-  position: absolute;
-  top: -16px; /* At the top of the information list */
-  left: 1rem; /* 1rem margin */
-  /* margin-left: -5px; */
-  border-width: 8px;
-  border-style: solid;
-  border-color: transparent transparent #2b2b2b transparent; /* triangle */
-}
-
-.scanner-container .header .upload-menu-list .menu-item {
-  width: 100%;
-  border-bottom: 1px solid rgb(55, 55, 55);
-  padding: 10px;
-  cursor: pointer;
-  background-color: #2b2b2b;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 5px;
-  overflow: hidden;
-  user-select: none;
-  color: #aaaaaa;
-  font-size: 12px;
-  font-family: OpenSans-Regular;
-  text-decoration: none;
-}
-
-.scanner-container .header .upload-menu-list .menu-item:hover {
-  opacity: 0.8;
-}
-
-.scanner-container .header .upload-menu-list .menu-item:last-child {
-  border: unset;
-}
-
 .result-container {
   position: absolute;
   width: 100%;

index.html

@@ -52,19 +52,13 @@ <h3 style="font-weight: normal">Quick Start Options</h3>
           <img class="up" src="./assets/arrow-up.svg" alt="up" />
         </div>
         <div class="camera-list"></div>
-        <div class="upload-menu-btn">
-          <img class="upload-menu-icon" src="./assets/upload-menu.svg" alt="upload-menu" />
-        </div>
-        <div class="upload-menu-list">
-          <div class="menu-item take-photo-btn">
-            Take a photo
-            <img src="./assets/photo-camera.svg" alt="take-photo-icon" />
-          </div>
-          <div class="menu-item upload-image-btn" onclick="document.querySelector('.upload-image-input').click()">
-            Upload an image
-            <img src="./assets/upload.svg" alt="upload-icon" />
-          </div>
-          <input type="file" class="upload-image-input" style="display: none" />
+        <input type="file" class="upload-image-input" style="display: none" />
+        <div
+          class="upload-img-btn"
+          title="Upload an Image"
+          onclick="document.querySelector('.upload-image-input').click()"
+        >
+          <img class="upload-img-icon" src="./assets/upload-menu.svg" alt="upload-menu" />
         </div>
         <div class="music-container">
           <img class="music" src="./assets/music-selected.svg" alt="music" title="Turn sound off" />

js/const.js

@@ -31,11 +31,7 @@ const cameraViewContainer = document.querySelector(".camera-view-container");
 const cameraListContainer = document.querySelector(".camera-list");
 const cameraSelector = document.querySelector(".camera-selector");
 
-const uploadMenuBtn = document.querySelector(".upload-menu-btn");
-const uploadMenuList = document.querySelector(".upload-menu-list");
-const uploadImageBtn = document.querySelector(".upload-image-btn");
 const uploadImageInput = document.querySelector(".upload-image-input");
-const takePhotoBtn = document.querySelector(".take-photo-btn");
 
 const informationBtn = document.querySelectorAll(".information-btn");
 const informationListContainer = document.querySelector(".information-list");

js/index.js

@@ -119,7 +119,6 @@ window.addEventListener("click", () => {
   up.style.display = "none";
   down.style.display = "inline-block";
   informationListContainer.style.display = "none"; // hide information menu
-  uploadMenuList.style.display = "none"; // hide upload image menu
 });
 
 // Recalculate the scan region when the window size changes
@@ -163,28 +162,9 @@ uploadImageInput.addEventListener("change", async (event) => {
     console.error(errMsg);
   }
 });
-takePhotoBtn.addEventListener("click", async (event) => {
-  try {
-    const image = cameraEnhancer.fetchImage();
-    const imageCvs = image.toCanvas();
-
-    // Open the camera after the model and .wasm files have loaded
-    pInit = pInit || (await init);
-    await pDataLoad.promise;
-
-    // Decode selected image with 'both' template.
-    const result = await cvRouter.capture(imageCvs, SCAN_TEMPLATES.both);
-    handleCapturedResult(result, image);
-  } catch (ex) {
-    let errMsg = ex.message || ex;
-    alert(errMsg);
-    console.error(errMsg);
-  }
-});
 
 cameraSelector.addEventListener("click", (e) => {
   informationListContainer.style.display = "none"; // hide information menu
-  uploadMenuList.style.display = "none"; // hide upload image menu
 
   e.stopPropagation();
   const isShow = cameraListContainer.style.display === "block";
@@ -209,20 +189,10 @@ closeSoundBtn.addEventListener("click", () => {
 
 informationBtn.forEach((infoBtn) =>
   infoBtn.addEventListener("click", (e) => {
-    uploadMenuList.style.display = "none"; // hide upload image menu
     cameraListContainer.style.display = "none"; // hide camera list
 
     e.stopPropagation();
     const isShow = informationListContainer.style.display === "block";
     informationListContainer.style.display = isShow ? "none" : "block";
   })
 );
-
-uploadMenuBtn.addEventListener("click", (e) => {
-  informationListContainer.style.display = "none"; // hide information menu
-  cameraListContainer.style.display = "none"; // hide camera list
-
-  e.stopPropagation();
-  const isShow = uploadMenuList.style.display === "block";
-  uploadMenuList.style.display = isShow ? "none" : "block";
-});

js/init.js

@@ -104,6 +104,7 @@ let init = (async () => {
 })();
 
 export const handleCapturedResult = (result, uploadedImage = null) => {
+  console.log(result);
   const recognizedResults = result.textLineResultItems;
   const parsedResults = result.parsedResultItems;
   const originalImage = result.items?.[0]?.imageData;
@@ -125,7 +126,7 @@ export const handleCapturedResult = (result, uploadedImage = null) => {
       alert(`Failed to parse the content.`);
       parsedResultArea.style.justifyContent = "flex-start";
     }
-    displayImage(uploadedImage || originalImage);
+    displayImage(uploadedImage || originalImage, recognizedResults[0].location.points);
 
     dispose();
   } else if (uploadedImage) {
@@ -155,7 +156,7 @@ const displayResults = (recognizedText, parsedResult) => {
   return false;
 };
 
-function displayImage(image) {
+function displayImage(image, points) {
   scannedImage.textContent = "";
 
   if (image.type?.startsWith("image/")) {
@@ -164,9 +165,36 @@ function displayImage(image) {
 
     img.src = imageUrl;
     img.className = "uploaded-image";
-    img.onload = () => URL.revokeObjectURL(imageUrl);
-
-    scannedImage.append(img);
+    img.onload = () => {
+      URL.revokeObjectURL(imageUrl);
+
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+
+      const width = points[1].x - points[0].x;
+      const height = points[2].y - points[1].y;
+
+      canvas.width = width;
+      canvas.height = height;
+
+      ctx.drawImage(
+        img,
+        points[0].x,
+        points[0].y,
+        width,
+        height, // Source coordinates
+        0,
+        0,
+        width,
+        height // Destination coordinates
+      );
+
+      const croppedImage = new Image();
+      croppedImage.src = canvas.toDataURL();
+      croppedImage.className = "uploaded-image";
+
+      scannedImage.append(croppedImage);
+    };
   } else if (image.toCanvas) {
     scannedImage.append(image.toCanvas());
   }
@@ -176,7 +204,6 @@ function dispose() {
   resultContainer.style.display = "flex"; // Show result container
   cameraListContainer.style.display = "none"; // hide header menu windows
   informationListContainer.style.display = "none";
-  uploadMenuList.style.display = "none";
   scanModeContainer.style.display = "none"; // hide scan mode buttons
 
   cameraEnhancer.close();