feat: update v1 (#14)

- updated home page
- updated template
- updated to dcv 2.4.2000
- add image preview and crop image to the recognized text lines
- removed redundant MRZ formatter (already in template)
- add validation status icons to result from DCP
- add comm100 livechat

Author: Felix-Dynamsoft

assets/upload-menu.svg

@@ -66,7 +66,7 @@ img {
   text-align: center;
   background-color: #323234;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 1rem 2rem 2rem;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
@@ -113,7 +113,6 @@ img {
 }
 
 .home-page .description .start-btn {
-  width: 180px;
   height: 6vh;
   min-height: 40px;
   max-height: 60px;
@@ -287,6 +286,7 @@ img {
   max-height: 200px;
 }
 
+.result-container .scanned-image img,
 .result-container .scanned-image canvas {
   object-fit: contain;
   width: 100%;
@@ -527,6 +527,20 @@ img {
   }
 }
 
+/* LIVE CHAT */
+.scanner-container .header .live-chat {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  display: none;
+  align-items: center;
+  cursor: pointer;
+}
+
+.scanner-container .header .live-chat:hover {
+  opacity: 0.8;
+}
+
 @media screen and (max-width: 800px) {
   html,
   body,
@@ -552,6 +566,15 @@ img {
     font-size: 20px;
     padding: 1.5rem;
   }
+
+  /* LIVE CHAT CSS */
+  .live-chat {
+    display: flex !important;
+  }
+
+  #comm100-float-button-20242b05-3781-4d86-9b7f-fab63ddcdde3-2 {
+    display: none !important;
+  }
 }
 
 @media screen and (max-width: 800px) and (orientation: landscape) {

css/index.css

@@ -70,11 +70,54 @@ <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>
+        <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" />
           <img class="no-music" src="./assets/music-unselected.svg" alt="no-music" title="Turn sound on" />
         </div>
-        <div class="information-btn">
+        <div class="live-chat">
+          <svg
+            data-v-2a1e9ed8=""
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            class="live-chat-icon"
+            onclick="Comm100API.do('livechat.button.click')"
+          >
+            <g data-v-2a1e9ed8="" transform="translate(-319 -816.551)">
+              <g data-v-2a1e9ed8="">
+                <g data-v-2a1e9ed8="" id="conversation-chat-2">
+                  <path
+                    data-v-2a1e9ed8=""
+                    d="M333.5,817.051h-10a4,4,0,0,0-4,4v5a4,4,0,0,0,4,4h1v4l4.5-4h4.5a4,4,0,0,0,4-4v-5A4,4,0,0,0,333.5,817.051Z"
+                    fill="none"
+                    stroke="#aaa"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="1"
+                  ></path>
+                  <path
+                    data-v-2a1e9ed8=""
+                    d="M330.5,833.051v1.5a2.5,2.5,0,0,0,2.5,2.5h2.5l3,3v-3H340a2.5,2.5,0,0,0,2.5-2.5v-3a2.5,2.5,0,0,0-2.5-2.5h-.5"
+                    fill="none"
+                    stroke="#aaa"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="1"
+                  ></path>
+                </g>
+              </g>
+            </g>
+          </svg>
+        </div>
+        <div class="information-btn" title="More Information">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon icon-tabler icon-tabler-info-circle"
@@ -138,8 +181,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;
           "
@@ -358,5 +401,31 @@ <h3 style="font-weight: normal">Quick Start Options</h3>
       ></iframe>
     </noscript>
     <!-- End Google Tag Manager -->
+    <div style="background-repeat: no-repeat; background-position: 0px 0px; margin: 0; padding: 0px 0px 0px 0px">
+      <!--Begin Comm100 Live Chat Code-->
+      <div id="comm100-button-20242b05-3781-4d86-9b7f-fab63ddcdde3"></div>
+      <script type="text/javascript">
+        var Comm100API = Comm100API || {};
+        (function (t) {
+          function e(e) {
+            var a = document.createElement("script"),
+              c = document.getElementsByTagName("script")[0];
+            (a.type = "text/javascript"), (a.async = !0), (a.src = e + t.site_id), c.parentNode.insertBefore(a, c);
+          }
+          (t.chat_buttons = t.chat_buttons || []),
+            t.chat_buttons.push({
+              code_plan: "20242b05-3781-4d86-9b7f-fab63ddcdde3",
+              div_id: "comm100-button-20242b05-3781-4d86-9b7f-fab63ddcdde3",
+            }),
+            (t.site_id = 90003305),
+            (t.main_code_plan = "20242b05-3781-4d86-9b7f-fab63ddcdde3"),
+            e("https://vue.comm100.com/livechat.ashx?siteId="),
+            setTimeout(function () {
+              t.loaded || e("https://standby.comm100vue.com/livechat.ashx?siteId=");
+            }, 5e3);
+        })(Comm100API || {});
+      </script>
+      <!--End Comm100 Live Chat Code-->
+    </div>
   </body>
 </html>

index.html

@@ -31,6 +31,8 @@ const cameraViewContainer = document.querySelector(".camera-view-container");
 const cameraListContainer = document.querySelector(".camera-list");
 const cameraSelector = document.querySelector(".camera-selector");
 
+const uploadImageInput = document.querySelector(".upload-image-input");
+
 const informationBtn = document.querySelectorAll(".information-btn");
 const informationListContainer = document.querySelector(".information-list");
 

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";
 
@@ -141,6 +141,30 @@ const restartVideo = async () => {
 };
 scanAgainBtn.addEventListener("click", restartVideo);
 
+uploadImageInput.addEventListener("change", async (event) => {
+  try {
+    const file = event.target.files[0];
+
+    console.log(event);
+
+    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) => {
   informationListContainer.style.display = "none"; // hide information menu
 

js/index.js

@@ -7,9 +7,7 @@ const pDataLoad = createPendingPromise();
 /** LICENSE ALERT - README
  * To use the library, you need to first specify a license key using the API "initLicense" as shown below.
  */
-Dynamsoft.License.LicenseManager.initLicense(
-  "DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAwLTEwMzAwNjk2NyIsIm1haW5TZXJ2ZXJVUkwiOiJodHRwczovL21sdHMuZHluYW1zb2Z0LmNvbS8iLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMCIsInNlc3Npb25QYXNzd29yZCI6IkVUSHZVNlNPV3F3ZiIsInN0YW5kYnlTZXJ2ZXJVUkwiOiJodHRwczovL3NsdHMuZHluYW1zb2Z0LmNvbS8iLCJjaGVja0NvZGUiOjM5OTMzODU2Nn0="
-);
+Dynamsoft.License.LicenseManager.initLicense("");
 /**
  * You can visit https://www.dynamsoft.com/customer/license/trialLicense/?product=mrz&utm_source=samples&package=js to get your own trial license good for 30 days.
  * For more information, see https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/user-guide/mrz-scanner.html#specify-the-license or contact [email protected].
@@ -99,31 +97,43 @@ 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;
-    const originalImage = result.items?.[0]?.imageData;
+  resultReceiver.onCapturedResultReceived = handleCapturedResult;
 
-    if (recognizedResults?.length) {
-      // Play sound feedback if enabled
-      isSoundOn ? Dynamsoft.DCE.Feedback.beep() : null;
+  await cvRouter.addResultReceiver(resultReceiver);
+})();
+
+export const handleCapturedResult = (result, uploadedImage = null) => {
+  console.log(result);
+  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;
 
-      // Display image
-      scannedImage.textContent = "";
-      scannedImage.append(originalImage.toCanvas());
+    parsedResultArea.innerText = "";
 
-      const parseSuccess = displayResults(recognizedResults[0]?.text, parsedResults?.[0]);
+    // Add MRZ Text to Result
+    const mrzElement = resultToHTMLElement("MRZ String", recognizedResults[0]?.text);
+    mrzElement.classList.add("code");
+    parsedResultArea.appendChild(mrzElement);
 
-      if (!parseSuccess) {
-        alert(`Failed to parse the content.`);
-        parsedResultArea.style.justifyContent = "flex-start";
-      }
+    const parseSuccess = displayResults(recognizedResults[0]?.text, parsedResults?.[0]);
 
-      dispose();
+    if (!parseSuccess) {
+      alert(`Failed to parse the content.`);
+      parsedResultArea.style.justifyContent = "flex-start";
     }
-  };
-  await cvRouter.addResultReceiver(resultReceiver);
-})();
+    displayImage(uploadedImage || originalImage);
+
+    dispose();
+  } else if (uploadedImage) {
+    parsedResultArea.innerText = "No results found";
+    displayImage(uploadedImage);
+    dispose();
+  }
+};
 
 const displayResults = (recognizedText, parsedResult) => {
   parsedResultArea.innerText = "";
@@ -145,12 +155,33 @@ const displayResults = (recognizedText, parsedResult) => {
   return false;
 };
 
+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);
+
+      scannedImage.append(img);
+    };
+  } else if (image.toCanvas) {
+    scannedImage.append(image.toCanvas());
+  }
+}
+
 function dispose() {
   resultContainer.style.display = "flex"; // Show result container
   cameraListContainer.style.display = "none"; // hide header menu windows
   informationListContainer.style.display = "none";
   scanModeContainer.style.display = "none"; // hide scan mode buttons
 
+  cameraEnhancer.close();
   cvRouter.stopCapturing();
   cameraView.clearAllInnerDrawingItems();
 }