update to internal commit 18a51b37

_includes/sidelist-guides.html

@@ -2,5 +2,6 @@
     <ul>
         <li><a href="{{ site.guides }}mrz-scanner.html" class="otherLinkColour">MRZ Scanner User Guide</a></li> 
         <li><a href="{{ site.guides }}mrz-scanner-customization.html" class="otherLinkColour">MRZ Scanner Customization Guide</a></li> 
+        <li><a href="{{ site.guides }}mrz-scanner-static-image.html" class="otherLinkColour">MRZ Scanner - Reading Static Images</a></li> 
     </ul>
 </li>

api/mrz-scanner.md

@@ -45,12 +45,14 @@ const mrzScanner = new Dynamsoft.MRZScanner({
 
 ### launch()
 
-Starts the **MRZ scanning workflow**.
+Starts the **MRZ scanning workflow**. If the method is run without a file input, the MRZScannerView UI will pop up and allow the user to scan MRZs using their camera. Alternatively, if the method is run with a file input parameter, the MRZ Scanner will read the MRZ from the file and display the result in a `MRZResultView`.
 
 #### Syntax
 
 ```ts
 launch(): Promise<MRZResult>
+
+launch(fileToProcess): Promise<MRZResult>
 ```
 
 #### Returns
@@ -71,6 +73,18 @@ A `Promise` resolving to a `MRZResult` object.
 })();
 ```
 
+```ts
+(async () => {
+    // Launch the scanner and wait for the result
+    try {
+        const result = await mrzScanner.launch(fileToProcess);
+        console.log(result); // print the MRZResult to the console
+    } catch (error){
+        console.error("Error processing file:", error);
+    }
+})();
+```
+
 ### dispose()
 
 Cleans up the MRZ Scanner resources and hides UI components.
@@ -177,6 +191,9 @@ interface MRZScannerViewConfig {
   showSoundToggle?: boolean;
 
   enableMultiFrameCrossFilter?: boolean; // false by default
+
+  uploadAcceptedTypes?: string;
+  uploadFileConverter?: (file: File) => Promise<Blob>;
 }
 ```
 
@@ -190,7 +207,9 @@ interface MRZScannerViewConfig {
 | `showUploadImage`       | `boolean`                | Determines the visibility of the "load image" icon to allow the user to select a static image from their local photo library.              |
 | `showFormatSelector`    | `boolean`                | Determines the visibility of the format selector box that allows the user to restrict the MRTD format(s) that are being read.  |
 | `showSoundToggle`       | `boolean`                | Determines the visibility of the "sound" icon that allows the user to play a beep sound once the MRZ is recognized.        |
-| `enableMultiFrameCrossFilter`      | `boolean`     | Enables or disables the MultiFrameResultCrossFilter that can improve the accuracy of the MRZ result, but possibly at the cost of speed.         |
+| `enableMultiFrameCrossFilter`      | `boolean`     | Enables or disables the MultiFrameResultCrossFilter that can improve the accuracy of the MRZ result, but possibly at the cost of speed.   |
+| `uploadAcceptedTypes`      | `string`     | Configures which image and file format(s) the library will accept if the user chooses to decode static images. |
+| `uploadFileConverter`      | `function`     | Converts non-image files (e.g. PDF) to blobs so that they can be read by the MRZ Scanner.  |
 
 #### Example
 
@@ -200,7 +219,21 @@ const mrzScanViewConfig = {
     showUploadImage: true, // hides the load image icon that shows up in the toolbar at the top of the view; true by default
     showFormatSelector: true, // hides the format selector box if more than two MRZ types are assigned; true by default
     showSoundToggle: false, // hides the sound icon that allows the user to control whether a beep is played once an MRZ is recognized; true by default
+    showPoweredByDynamsoft?: boolean; // hides the "Powered By Dynamsoft" message that appears on the scanner UI; true by default
     enableMultiFrameCrossFilter: true, // turning the filter off could improve the speed but at the cost of result accuracy; true by default
+
+    uploadAcceptedTypes: "image/*,application/pdf", // allows the user to upload static images and PDFs to be read by the MRZ Scanner - default is "image/*"
+    uploadFileConverter: async (file) => {
+        if (file.type === "application/pdf") {
+            // Example PDF to image conversion
+            const pdfData = await convertPDFToImage(file);
+            return pdfData;
+        }
+
+        // For other non-image types, you can add more conversion logic
+        // If it's not a supported type, throw an error
+        throw new Error("Unsupported file type");
+    },
 };
 
 const mrzConfig = {

codegallery/index.md

@@ -20,6 +20,24 @@ As mentioned previously, this is the most rudimentary and basic implementation o
 
 The full code of Hello World can be found [**here**](helloworld/index.md).
 
+## React
+
+In this sample, a Hello World implementation is done with the [React](https://react.dev/) framework.
+
+Please find the full code of this sample [**here**](https://github.com/Dynamsoft/mrz-scanner-javascript/tree/main/samples/frameworks/react-hooks).
+
+## Angular
+
+In this sample, a Hello World implementation is done with the [Angular](https://angular.dev/) framework.
+
+Please find the full code of this sample [**here**](https://github.com/Dynamsoft/mrz-scanner-javascript/tree/main/samples/frameworks/angular).
+
+## Vue
+
+In this sample, a Hello World implementation is done with the [Vue](https://vuejs.org/) framework.
+
+Please find the full code of this sample [**here**](https://github.com/Dynamsoft/mrz-scanner-javascript/tree/main/samples/frameworks/vue).
+
 ## Demo
 
 The demo implementation adds a bit more colour and character to the Hello World implementation, and in turn helping you create a presentable and friendly design for your MRZ scanning application!

guides/mrz-scanner-customization.md

@@ -15,7 +15,7 @@ permalink: /guides/mrz-scanner-customization.html
 >
 >Before going into the ways that you can customize the MRZ Scanner, please read the [MRZ Scanner JavaScript Edition User Guide]({{ site.guides }}mrz-scanner.html).
 
-This guide expands on the User Guide that explored the MRZ Scanner Hello World sample project. Here we explore ways to customize the UI as well as the performance of the MRZ Scanner. We will walk through the three main configuration interfaces - [**`MRZScannerConfig`**]({{ site.api }}mrz-scanner.html#mrzscannerconfig), [**`MRZScannerViewConfig`**][**`MRZScannerViewConfig`**]({{ site.api }}mrz-scanner.html#mrzscannerviewconfig), and [**`MRZResultViewConfig`**][**`MRZScannerViewConfig`**]({{ site.api }}mrz-scanner.html#mrzresultviewconfig). These configuration interfaces make customizing the MRZ Scanner as easy as adding or changing a few properties in the instance constructor. Every sample is a variation on the previous Hello World sample with a few additional properties defined in the configuration interfaces, and so we only show the differing portion rather than all the code.
+This guide expands on the User Guide that explored the MRZ Scanner Hello World sample project. Here we explore ways to customize the UI as well as the performance of the MRZ Scanner. We will walk through the three main configuration interfaces - [**`MRZScannerConfig`**]({{ site.api }}mrz-scanner.html#mrzscannerconfig), [**`MRZScannerViewConfig`**]({{ site.api }}mrz-scanner.html#mrzscannerviewconfig), and [**`MRZResultViewConfig`**]({{ site.api }}mrz-scanner.html#mrzresultviewconfig). These configuration interfaces make customizing the MRZ Scanner as easy as adding or changing a few properties in the instance constructor. Every sample is a variation on the previous Hello World sample with a few additional properties defined in the configuration interfaces, and so we only show the differing portion rather than all the code.
 
 ## `MRZScannerConfig` Overview
 
@@ -92,7 +92,13 @@ const mrzScanner = new Dynamsoft.MRZScanner({
 
 6. **`showSoundToggle`** (default value `true`) - the MRZ Scanner can play a beeping sound upon successfully recognizing an MRZ. This feature depends on browser support. When this property is `true`, the sound toggle icon appears at the top of the MRZScannerView in a grey disabled state. To hide this feature altogether, set this property to `false`.
 
-7. **`enableMultiFrameCrossFilter`** (default value `true`) - enable the multi-frame result cross filter to improve read accuracy at the cost of a slight increase to MRZ read time.
+7. **`showPoweredByDynamsoft`** (default value `true`) - the scanner UI includes a "Powered By Dynamsoft" message that shows at the bottom. This property allows you to hide this text if you wish.
+
+8. **`enableMultiFrameCrossFilter`** (default value `true`) - enable the multi-frame result cross filter to improve read accuracy at the cost of a slight increase to MRZ read time.
+
+9. **`uploadAcceptedTypes`** (default value `"image/*"`) - allows the user to configure which image and file format(s) the library will accept if the user chooses to decode static images instead of using the camera view to scan MRZs.
+
+10. **`uploadFileConverter`** - this function converts non-image files (e.g. PDF) to blobs so that they can be read by the MRZ Scanner. It is essential that this function is used if you would like to support reading PDF files in your web app.
 
 > [!NOTE]
 >
@@ -110,7 +116,20 @@ const mrzScanner = new Dynamsoft.MRZScanner({
       showUploadImage: false, // hides the load image icon that shows up in the toolbar at the top of the view; true by default
       showFormatSelector: false, // hides the format selector box if more than two MRZ types are assigned; true by default
       showSoundToggle: false, // hides the sound icon that allows the user to control whether a beep is played once an MRZ is recognized; true by default
+      showPoweredByDynamsoft: false, // hides the "Powered By Dynamsoft" message that appears on the scanner UI; true by default
       enableMultiFrameCrossFilter: false, // turning the filter off could improve the speed but at the cost of result accuracy; true by default
+
+      uploadAcceptedTypes: "image/*,application/pdf", // allows the user to upload static images and PDFs to be read by the MRZ Scanner - default is "image/*"
+      uploadFileConverter: async (file) => {
+         if (file.type === "application/pdf") {
+            // Example PDF to image conversion
+            const pdfData = await convertPDFToImage(file);
+            return pdfData;
+         }
+        // For other non-image types, you can add more conversion logic
+        // If it's not a supported type, throw an error
+        throw new Error("Unsupported file type");
+      },
    }
 });
 ```
@@ -123,10 +142,16 @@ The `MRZScannerView` provides a guide frame for each of the three MRTD formats.
 
 2. Otherwise, if both **ID (TD1)** and **ID (TD2)** are selected or only **ID (TD1)**, (but not passport), then the frame for ID (**TD1**) will be displayed.
 
-3. The ID(TD2) guide frame only gets displayed if **ID (TD2)** is the only selected format.
+3. The ID (TD2) guide frame only gets displayed if **ID (TD2)** is the only selected format.
 
 Please contact the [Dynamsoft Support Team](https://www.dynamsoft.com/company/contact/) for any further inquiries, or to customize the frame guide selection logic.
 
+### Reading Static Images using the MRZ Scanner
+
+Starting from v2.1 of the MRZ Scanner, the library is now able to read MRZs **directly** from static images and PDFs. To support this, the MRZScannerViewConfig will need to be configured to support that, especially for PDFs.
+
+To learn more on how to create a web application that supports static image/PDF reading using the MRZ Scanner, please refer to this [guide]({{ site.guides }}mrz-scanner-static-image.html). Furthermore, please refer to the full File Input Sample that the previously linked guide walks you through.
+
 ## `MRZResultViewConfig` Overview
 
 The **`MRZResultView`** user interface displays the parsed MRZ results as well as the cropped image of the MRTD document to save the time and resources needed to build your own viewer. The [**`MRZResultViewConfig`**]({{ site.api }}mrz-scanner.html#mrzresultviewconfig) contains the following settings used to customize this View: