feat: add image preview

Author: felixindrawan

assets/upload-image.svg

@@ -238,6 +238,24 @@ img {
   display: none;
 }
 
+.scanner-container .header .upload-image-btn {
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.scanner-container .header .upload-image-icon {
+  width: 24px;
+  height: 24px;
+}
+
+.scanner-container .header .upload-image-icon:hover {
+  opacity: 0.8;
+}
+
 .result-container {
   position: absolute;
   width: 100%;
@@ -269,6 +287,17 @@ img {
   color: #aaaaaa;
 }
 
+.result-container .scanned-image {
+  max-height: 200px;
+}
+
+.result-container .scanned-image img,
+.result-container .scanned-image canvas {
+  object-fit: contain;
+  width: 100%;
+  height: 100%;
+}
+
 .result-container .parsed-result-area {
   width: 100%;
   height: 84%;
@@ -292,7 +321,7 @@ img {
   font-family: monospace;
 }
 
-.result-container .restart-video {
+.result-container .scan-again {
   width: 100%;
   height: 10%;
   min-height: 60px;
@@ -304,7 +333,7 @@ img {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
-.result-container .restart-video .btn-restart-video {
+.result-container .scan-again .btn-scan-again {
   width: 160px;
   height: 60%;
   border: 0;

css/index.css

@@ -79,6 +79,10 @@ <h3 style="font-weight: normal">Quick Start Options</h3>
           <img class="up" src="./assets/arrow-up 1.svg" alt="up" />
         </div>
         <div class="camera-list"></div>
+        <input type="file" class="upload-image-input" style="display: none" />
+        <div class="upload-image-btn" onclick="document.querySelector('.upload-image-input').click()">
+          <img class="upload-image-icon" src="./assets/upload-image.svg" alt="upload-image" />
+        </div>
         <div class="music-container">
           <img class="music" src="./assets/music-selected.svg" alt="music" />
           <img class="no-music" src="./assets/music-unselected.svg" alt="no-music" />
@@ -195,8 +199,8 @@ <h3 style="font-weight: normal">Quick Start Options</h3>
             right: 0;
             bottom: 0;
             margin: auto;
-            width: 40%;
-            height: 40%;
+            width: 20%;
+            height: 20%;
             fill: #aaa;
             animation: 1s linear infinite dce-rotate;
           "
@@ -389,9 +393,10 @@ <h3 style="font-weight: normal">Quick Start Options</h3>
           </svg>
         </div>
       </div>
+      <div class="scanned-image"></div>
       <div class="parsed-result-area"></div>
-      <div class="restart-video">
-        <button class="btn-restart-video">Restart Video</button>
+      <div class="scan-again">
+        <button class="btn-scan-again">Scan Again</button>
       </div>
     </div>
     <div class="scan-mode-container">

index.html

@@ -28,6 +28,8 @@ const homePage = document.querySelector(".home-page");
 
 const cameraViewContainer = document.querySelector(".camera-view-container");
 
+const uploadImageInput = document.querySelector(".upload-image-input");
+
 const cameraListContainer = document.querySelector(".camera-list");
 const cameraSelector = document.querySelector(".camera-selector");
 
@@ -39,14 +41,15 @@ const scannerContainer = document.querySelector(".scanner-container");
 const mrzGuideFrame = document.querySelector(".mrz-frame");
 
 const resultContainer = document.querySelector(".result-container");
+const scannedImage = document.querySelector(".scanned-image");
 const parsedResultArea = document.querySelector(".parsed-result-area");
 
 const startScaningBtn = document.querySelectorAll(".start-btn");
 
 const scanModeContainer = document.querySelector(".scan-mode-container");
 const scanBothBtn = document.querySelector("#scan-both-btn");
 
-const restartVideoBtn = document.querySelector(".btn-restart-video");
+const scanAgainBtn = document.querySelector(".btn-scan-again");
 
 const playSoundBtn = document.querySelector(".music");
 const closeSoundBtn = document.querySelector(".no-music");

js/const.js

@@ -1,4 +1,4 @@
-import { init, pDataLoad } from "./init.js";
+import { handleCapturedResult, init, pDataLoad } from "./init.js";
 import { judgeCurResolution, shouldShowScanModeContainer, showNotification } from "./util.js";
 import { checkOrientation, getVisibleRegionOfVideo } from "./util.js";
 
@@ -139,7 +139,29 @@ const restartVideo = async () => {
   resultContainer.style.display = "none";
   document.querySelector(`#scan-${currentMode}-btn`).click();
 };
-restartVideoBtn.addEventListener("click", restartVideo);
+scanAgainBtn.addEventListener("click", restartVideo);
+
+uploadImageInput.addEventListener("change", async (event) => {
+  try {
+    const file = event.target.files[0];
+
+    if (file) {
+      // Open the camera after the model and .wasm files have loaded
+      pInit = pInit || (await init);
+      await pDataLoad.promise;
+
+      event.target.value = "";
+
+      // Decode selected image with 'both' template.
+      const result = await cvRouter.capture(file, SCAN_TEMPLATES.both);
+      handleCapturedResult(result, file);
+    }
+  } catch (ex) {
+    let errMsg = ex.message || ex;
+    alert(errMsg);
+    console.error(errMsg);
+  }
+});
 
 cameraSelector.addEventListener("click", (e) => {
   e.stopPropagation();

js/index.js

@@ -98,42 +98,70 @@ let init = (async () => {
 
   /* Defines the result receiver for the solution.*/
   const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
-  resultReceiver.onCapturedResultReceived = (result) => {
-    const recognizedResults = result.textLineResultItems;
-    const parsedResults = result.parsedResultItems;
-
-    if (recognizedResults?.length) {
-      // Play sound feedback if enabled
-      isSoundOn ? Dynamsoft.DCE.Feedback.beep() : null;
-
-      parsedResultArea.innerText = "";
-
-      // Add MRZ Text to Result
-      const mrzElement = resultToHTMLElement("MRZ String", formatMRZ(recognizedResults[0]?.text));
-      mrzElement.classList.add("code");
-      parsedResultArea.appendChild(mrzElement);
-
-      // If a parsed result is obtained, use it to render the result page
-      if (parsedResults) {
-        const parseResultInfo = extractDocumentFields(parsedResults[0]);
-        Object.entries(parseResultInfo).map(([field, value]) => {
-          const resultElement = resultToHTMLElement(field, value);
-          parsedResultArea.appendChild(resultElement);
-        });
-      } else {
-        alert(`Failed to parse the content.`);
-        parsedResultArea.style.justifyContent = "flex-start";
-      }
-      resultContainer.style.display = "flex";
-      cameraListContainer.style.display = "none";
-      informationListContainer.style.display = "none";
-      scanModeContainer.style.display = "none";
+  resultReceiver.onCapturedResultReceived = handleCapturedResult;
 
-      cvRouter.stopCapturing();
-      cameraView.clearAllInnerDrawingItems();
-    }
-  };
   await cvRouter.addResultReceiver(resultReceiver);
 })();
 
+export const handleCapturedResult = (result, uploadedImage = null) => {
+  const recognizedResults = result.textLineResultItems;
+  const parsedResults = result.parsedResultItems;
+  const originalImage = result.items?.[0]?.imageData;
+
+  if (recognizedResults?.length) {
+    // Play sound feedback if enabled
+    isSoundOn ? Dynamsoft.DCE.Feedback.beep() : null;
+
+    parsedResultArea.innerText = "";
+
+    // Add MRZ Text to Result
+    const mrzElement = resultToHTMLElement("MRZ String", formatMRZ(recognizedResults[0]?.text));
+    mrzElement.classList.add("code");
+    parsedResultArea.appendChild(mrzElement);
+
+    // If a parsed result is obtained, use it to render the result page
+    if (parsedResults) {
+      const parseResultInfo = extractDocumentFields(parsedResults[0]);
+      Object.entries(parseResultInfo).map(([field, value]) => {
+        const resultElement = resultToHTMLElement(field, value);
+        parsedResultArea.appendChild(resultElement);
+      });
+
+      if (uploadedImage && uploadedImage.type.startsWith("image/")) {
+        handleUploadedImage(uploadedImage);
+      } else if (originalImage) {
+        scannedImage.innerHTML = "";
+        scannedImage.append(originalImage.toCanvas());
+      }
+    } else {
+      alert(`Failed to parse the content.`);
+      parsedResultArea.style.justifyContent = "flex-start";
+    }
+    resultContainer.style.display = "flex";
+    cameraListContainer.style.display = "none";
+    informationListContainer.style.display = "none";
+    scanModeContainer.style.display = "none";
+
+    cameraEnhancer.close();
+    cvRouter.stopCapturing();
+    cameraView.clearAllInnerDrawingItems();
+  }
+};
+
+function handleUploadedImage(file) {
+  const img = document.createElement("img");
+  const imageUrl = URL.createObjectURL(file);
+
+  img.src = imageUrl;
+  img.className = "uploaded-image";
+
+  // Append the image to the div
+  scannedImage.innerHTMl = "";
+  scannedImage.append(img);
+
+  img.onload = () => {
+    URL.revokeObjectURL(imageUrl);
+  };
+}
+
 export { pDataLoad, init };

js/init.js

@@ -33,12 +33,12 @@ export function extractDocumentFields(result) {
     const fullExpiryYear = `${expiryYearBase}${expiryYear}`;
 
     parseResultInfo["Document Type"] = documentType;
-    parseResultInfo["Issuing State"] = result.getFieldValue("issuingState");
     parseResultInfo["Surname"] = result.getFieldValue("primaryIdentifier");
     parseResultInfo["Given Name"] = result.getFieldValue("secondaryIdentifier");
+    parseResultInfo["Nationality"] = result.getFieldValue("nationality");
     parseResultInfo["Document Number"] =
       type === "P" ? result.getFieldValue("passportNumber") : result.getFieldValue("documentNumber");
-    parseResultInfo["Nationality"] = result.getFieldValue("nationality");
+    parseResultInfo["Issuing State"] = result.getFieldValue("issuingState");
     parseResultInfo["Sex"] = result.getFieldValue("sex");
     parseResultInfo["Date of Birth (YYYY-MM-DD)"] =
       fullBirthYear + "-" + result.getFieldValue("birthMonth") + "-" + result.getFieldValue("birthDay");

js/util.js

@@ -2,21 +2,21 @@
   "CaptureVisionTemplates": [
     {
       "Name": "ReadPassportAndId",
-      "OutputOriginalImage": 0,
+      "OutputOriginalImage": 1,
       "ImageROIProcessingNameArray": ["roi-passport-and-id"],
       "SemanticProcessingNameArray": ["sp-passport-and-id"],
       "Timeout": 2000
     },
     {
       "Name": "ReadPassport",
-      "OutputOriginalImage": 0,
+      "OutputOriginalImage": 1,
       "ImageROIProcessingNameArray": ["roi-passport"],
       "SemanticProcessingNameArray": ["sp-passport"],
       "Timeout": 2000
     },
     {
       "Name": "ReadId",
-      "OutputOriginalImage": 0,
+      "OutputOriginalImage": 1,
       "ImageROIProcessingNameArray": ["roi-id"],
       "SemanticProcessingNameArray": ["sp-id"],
       "Timeout": 2000