-
- 
- 
+ 
+ 
+ 
-
-
-
+
+
+
- 
+
@@ -117,43 +96,11 @@ 
Github Projects
-
+
Quick Start Options
target="_blank"
>
Contact Us
-
+
diff --git a/pr-preview/pr-14/js/const.js b/pr-preview/pr-14/js/const.js
index bf96991..4af569f 100644
--- a/pr-preview/pr-14/js/const.js
+++ b/pr-preview/pr-14/js/const.js
@@ -28,11 +28,15 @@ 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");
+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");
diff --git a/pr-preview/pr-14/js/index.js b/pr-preview/pr-14/js/index.js
index ad166f0..7d7a828 100644
--- a/pr-preview/pr-14/js/index.js
+++ b/pr-preview/pr-14/js/index.js
@@ -115,10 +115,11 @@ const region = () => {
// -----------Logic for calculating scan region ↑------------
window.addEventListener("click", () => {
- cameraListContainer.style.display = "none";
+ cameraListContainer.style.display = "none"; // hide camera list and reset arrow indicator
up.style.display = "none";
down.style.display = "inline-block";
- informationListContainer.style.display = "none";
+ informationListContainer.style.display = "none"; // hide information menu
+ uploadMenuList.style.display = "none"; // hide upload image menu
});
// Recalculate the scan region when the window size changes
@@ -162,8 +163,30 @@ 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);
+ console.log(result);
+ 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";
cameraListContainer.style.display = isShow ? "none" : "block";
@@ -187,8 +210,20 @@ 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";
+});
diff --git a/pr-preview/pr-14/js/init.js b/pr-preview/pr-14/js/init.js
index 849be92..f56840b 100644
--- a/pr-preview/pr-14/js/init.js
+++ b/pr-preview/pr-14/js/init.js
@@ -119,49 +119,69 @@ export const handleCapturedResult = (result, uploadedImage = null) => {
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);
- });
+ const parseSuccess = displayResults(recognizedResults[0]?.text, parsedResults?.[0]);
- if (uploadedImage && uploadedImage.type.startsWith("image/")) {
- handleUploadedImage(uploadedImage);
- } else if (originalImage) {
- scannedImage.innerHTML = "";
- scannedImage.append(originalImage.toCanvas());
- }
- } else {
+ if (!parseSuccess) {
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();
+ displayImage(uploadedImage || originalImage);
+
+ dispose();
+ } else if (uploadedImage) {
+ parsedResultArea.innerText = "No results found";
+ displayImage(uploadedImage);
+ dispose();
+ }
+};
+
+const displayResults = (recognizedText, parsedResult) => {
+ parsedResultArea.innerText = "";
+
+ // Display MRZ text
+ const mrzElement = resultToHTMLElement("MRZ String", recognizedText);
+ mrzElement.classList.add("code");
+ parsedResultArea.appendChild(mrzElement);
+
+ // Display parsed fields
+ if (parsedResult) {
+ const fields = extractDocumentFields(parsedResult);
+ Object.entries(fields).forEach(([field, value]) => {
+ parsedResultArea.appendChild(resultToHTMLElement(field, value));
+ });
+ return true;
}
+
+ return false;
};
-function handleUploadedImage(file) {
- const img = document.createElement("img");
- const imageUrl = URL.createObjectURL(file);
+function displayImage(image) {
+ scannedImage.textContent = "";
+
+ if (image.type?.startsWith("image/")) {
+ const img = document.createElement("img");
+ const imageUrl = URL.createObjectURL(image);
+
+ img.src = imageUrl;
+ img.className = "uploaded-image";
+ img.onload = () => URL.revokeObjectURL(imageUrl);
- img.src = imageUrl;
- img.className = "uploaded-image";
+ scannedImage.append(img);
+ } else if (image.toCanvas) {
+ scannedImage.append(image.toCanvas());
+ }
+}
- // Append the image to the div
- scannedImage.innerHTMl = "";
- scannedImage.append(img);
+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
- img.onload = () => {
- URL.revokeObjectURL(imageUrl);
- };
+ cameraEnhancer.close();
+ cvRouter.stopCapturing();
+ cameraView.clearAllInnerDrawingItems();
}
export { pDataLoad, init };
+
+ 
+
+
+
+
+ Take a photo
+ 
+
+
+
+ Upload an image
+ 
+
+
+
@@ -117,43 +96,11 @@ Quick Start Options
target="_blank" > About - +
Github Projects
-
+
Quick Start Options
target="_blank"
>
Contact Us
-
+