From c4edb114e5cbaca1c570ba7e94133d1ed7397037 Mon Sep 17 00:00:00 2001 From: DMGithubPublisher Date: Fri, 16 May 2025 08:59:31 +0800 Subject: [PATCH] update to internal commit 18a51b37 --- _includes/sidelist-guides.html | 1 + api/mrz-scanner.md | 37 +++- codegallery/index.md | 18 ++ guides/mrz-scanner-customization.md | 31 +++- guides/mrz-scanner-static-image.md | 253 ++++++++++++++++++++++++++++ guides/mrz-scanner.md | 12 +- index.md | 5 +- releasenotes/index.md | 19 +++ 8 files changed, 366 insertions(+), 10 deletions(-) create mode 100644 guides/mrz-scanner-static-image.md diff --git a/_includes/sidelist-guides.html b/_includes/sidelist-guides.html index 110d346..96909da 100644 --- a/_includes/sidelist-guides.html +++ b/_includes/sidelist-guides.html @@ -2,5 +2,6 @@ \ No newline at end of file diff --git a/api/mrz-scanner.md b/api/mrz-scanner.md index bc64974..71ad58d 100644 --- a/api/mrz-scanner.md +++ b/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 + +launch(fileToProcess): Promise ``` #### 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; } ``` @@ -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 = { diff --git a/codegallery/index.md b/codegallery/index.md index bb600d5..68011cb 100644 --- a/codegallery/index.md +++ b/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! diff --git a/guides/mrz-scanner-customization.md b/guides/mrz-scanner-customization.md index 1e8c4b2..0b6ee19 100644 --- a/guides/mrz-scanner-customization.md +++ b/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: diff --git a/guides/mrz-scanner-static-image.md b/guides/mrz-scanner-static-image.md new file mode 100644 index 0000000..77d2950 --- /dev/null +++ b/guides/mrz-scanner-static-image.md @@ -0,0 +1,253 @@ +--- +layout: default-layout +needAutoGenerateSidebar: true +needGenerateH3Content: true +noTitleIndex: false +title: Setting up a MRZ Scanner for Static Images and PDFs +keywords: Documentation, MRZ Scanner, Dynamsoft MRZ Scanner JavaScript Edition, Static Image, PDF +description: Dynamsoft MRZ Scanner User Guide +permalink: /guides/mrz-scanner-static-image.html +--- + +# Setting up the MRZ Scanner for Static Images and PDFs + +In the main [MRZ Scanner JS User Guide]({{ site.guides }}mrz-scanner.html), we explored how to use the default UI of the MRZ Scanner to read MRZs via interactive video stream while at the same time including the ability to read from photos in your photo library via the Load Image button that is part of the [`MRZScannerView`]({{ site.guides }}mrz-scanner.html#mrzscannerview). + +With the arrival of **v2.1** of the MRZ Scanner, the library has introduced the ability to read MRZs directly from static images without the need to use the file/photo picker that is a default part of the mobile device or the computer. In this guide, we will explore how to use the MRZ Scanner API in order to read MRZs from multiple image formats, as well as PDFs. + +> [!NOTE] +> In order to follow with this guide, please refer to the [**use-file-input sample**](https://github.com/Dynamsoft/mrz-scanner-javascript/tree/main/samples/scenarios/use-file-input.html) that is hosted on the main Github repo of the MRZ Scanner source files. + +## Prerequisites + +To get started with the development process, a valid license key is needed. To obtain a license key, please refer to the [Licensing]({{ site.guides }}mrz-scanner.html#license) section of the main User Guide. The next section will break down the code and take you through the sample step-by-step. + +## Breaking Down the Code + +### Step 1: Including the Library and Defining UI Elements + +The first step in making the sample is to define the script references and the HTML elements of the page. In terms of the scripts, similar to the Hello World sample, the MRZ Scanner script needs to be referenced, either locally or via a CDN link. Since this sample will also support PDFs, we must use the [**PDF JS**](https://github.com/mozilla/pdf.js) library. Here is the start: + +```html + + + + + + Dynamsoft MRZ Scanner - Use File Input + + + + + + + + + + + + + +
+ + +``` + +### Step 2: Setting up PDF.js + +Now that the HTML and scripts have been set, it's time to set up the PDF.js library in order to support loading PDFs into your web app. Here is the code to do that: + +```html + +``` + +### Step 3: Initializing the Dynamsoft MRZ Scanner + +Now that we are working on the main script of the operation of the web application, one of the first things that we need to do is to initialize the MRZ Scanner which will be responsible for the MRZ reading functionality of the web app. + +```js +// Initialize the Dynamsoft MRZ Scanner +const mrzscanner = new Dynamsoft.MRZScanner({ + license: "YOUR_LICENSE_KEY_HERE", + scannerViewConfig: { + uploadAcceptedTypes: "image/*,application/pdf", + 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"); + }, + }, +}); +``` + +It is important to pay attention to the new properties that have been introduced to the [**`MRZScannerViewConfig`**]({{ site.api }}mrz-scanner.html#mrzscannerviewconfig) interface. The first new property is `uploadAcceptedTypes` which sets the file format(s) that the MRZ Scanner will accept. In this sample, we set to accept any image type as well as PDF. The second property is the `uploadFileConverter` - which is needed to support PDF files as those need to be converted to images so that the MRZ Scanner can accept them as input. + +### Step 4: Implementing the convertPDFToImage function + +In the previous step, we used a `convertPDFToImage` function in the `uploadFileConverter` property, but that function has not been implemented yet. Let's implement that now: + +```js +// PDF to image conversion function +async function convertPDFToImage(file) { + try { + // Load the PDF file + const arrayBuffer = await file.arrayBuffer(); + const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise; + + // Get the first page only + if (pdf.numPages === 0) { + throw new Error("The PDF has no pages"); + } + + const page = await pdf.getPage(1); // Page numbers are 1-based in pdf.js + + // Set a reasonable scale for good rendering quality + const scale = 1.5; + const viewport = page.getViewport({ scale }); + + // Create a canvas for rendering + const canvas = document.createElement("canvas"); + const context = canvas.getContext("2d"); + canvas.width = viewport.width; + canvas.height = viewport.height; + + // Render the PDF page to the canvas + const renderContext = { + canvasContext: context, + viewport: viewport, + }; + + await page.render(renderContext).promise; + + // Convert canvas to blob + return new Promise((resolve, reject) => { + canvas.toBlob((blob) => { + if (blob) { + resolve(blob); + } else { + reject(new Error("Failed to create image from PDF")); + } + }, "image/png"); + }); + } catch (error) { + console.error("PDF processing error:", error); + alert("PDF Processing error. Please try again"); + throw new Error("PDF Processing Error."); + } +} +``` + +> [!NOTE] +> It is important to note that currently, this sample only accepts **single-page PDF** files. The above `convertPDFToImage` function can process only a single-page PDF file. + +In this function, any **single-page** PDF file that is accepted as input is converted to a Blob that has a `PNG` type. Now that the PDF has been converted to a an image type, it's ready to get fed to the MRZ Scanner to be read. + +### Step 5: Launching the MRZ Scanner + +Now that all of the core functions needed for loading the image or PDF have been implemented, it's time to connect all of these parts to the [`launch`]({{ site.api }}mrz-scanner.html#launch) method of the MRZ Scanner. One of the main changes in v2.1 of the MRZ Scanner is that the `launch` method can now be run with a file input. + +In the code below, there are two trigger functions, one for launching the MRZ Scanner with its normal camera UI (MRZScannerView) The following trigger functions demonstrate how to read the MRZ from a file when said file is uploaded, then we automatically run the `launch` command in order to read the MRZ from the file without needing to click "Start Scan". + +```js +document.getElementById("start-scan").onclick = async function () { + const result = await mrzscanner.launch(); + displayResult(result); +}; + +document.getElementById("initialFile").onchange = async function () { + const files = Array.from(this.files || []); + if (files.length) { + try { + let fileToProcess = files[0]; + + // Handle PDF conversion if needed + if (fileToProcess.type === "application/pdf") { + fileToProcess = await convertPDFToImage(fileToProcess); + } + + const result = await mrzscanner.launch(fileToProcess); + displayResult(result); + } catch (error) { + console.error("Error processing file:", error); + resultContainer.innerHTML = `

Error: ${error.message}

`; + } + } +}; +``` + +> [!NOTE] +> Please note the difference in how the launch command is run when using the default UI (which includes the camera) and how the launch command is run when trying to read from a static image/file. When using the default UI, it is run as `mrzScanner.launch({})`. When reading from a static image, it is run as `mrzScanner.launch()` or `mrzScanner.launch(file)`. + +### Step 6: Displaying the Result + +When the MRZ is read, the last step that we need to do is to display the result to the user. Here is the `displayResult` function + +```js +function displayResult(result) { + console.log(result); + + if (result?.data) { + resultContainer.innerHTML = ""; // Clear placeholder content + + if (result.originalImageResult?.toCanvas) { + const canvas = result.originalImageResult?.toCanvas(); + + canvas.style.objectFit = "contain"; + canvas.style.width = "100%"; + canvas.style.height = "100%"; + resultContainer.appendChild(canvas); + } + + let resultHTML = ``; + Object.entries(result.data).forEach(([key, value]) => { + const label = Dynamsoft.MRZDataLabel[key]; + + const container = document.createElement("div"); + container.className = "mrz-result-container"; + const labelContainer = document.createElement("div"); + const valueContainer = document.createElement("div"); + + labelContainer.textContent = label; + valueContainer.textContent = `${JSON.stringify(value)}`; + + container.appendChild(labelContainer); + container.appendChild(valueContainer); + resultContainer.appendChild(container); + }); + } else { + resultContainer.innerHTML = "

No MRZ scanned. Please try again.

"; + } +} +``` + +## Conclusion + +Now that the code is all done, all you need to do is run the app either via npm or you can host the source files yourself and serve your web application via a HTTPS environment. + +With this app, you can read MRZs from static images and files without needing to use the MRZScannerView UI, therefore covering cases where a camera is not needed at all or cases where the images are obtained via a different source e.g. via a scanner and Dynamic Web TWAIN. + +If you have any questions about this use case, please contact the [Dynamsoft Support Team](https://www.dynamsoft.com/company/contact/). \ No newline at end of file diff --git a/guides/mrz-scanner.md b/guides/mrz-scanner.md index e37205d..fb2685b 100644 --- a/guides/mrz-scanner.md +++ b/guides/mrz-scanner.md @@ -127,7 +127,7 @@ Follow these steps in order to build from the source: 3. Open the *Hello World* sample included with the source files located at `/samples/hello-world.html` (relative path to the decompressed directory) using your code editor of choice (like VS Code). -4. Search for 'YOUR_LICENSE_KEY_HERE' ad replace that with your own license key, whether it is trial or full. +4. Search for 'YOUR_LICENSE_KEY_HERE' and replace that with your own license key, whether it is trial or full. 5. Install project dependencies - in the terminal, navigate to the project root directory and run the following: ```bash @@ -221,7 +221,7 @@ The `MRZScannerView` is configured using [**`MRZScannerViewConfig`**]({{ site.ap 4. **Resolution/Camera Select Dropdown**: This dropdown allows the user to switch cameras (should they have more than one available on the device), or select a different resolution for the camera that is currently selected. -5. **Load Image Button**: This button allows the user to scan a file of an MRZ-containing image from the device's local storage. +5. **Load Image Button**: This button allows the user to scan a file of an image that contains a MRZ from the device's local storage. 6. **Sound Button**: When toggled on, the MRZ Scanner plays a *beep* sound to signal when the scanner recognizes an MRZ. @@ -229,6 +229,9 @@ The `MRZScannerView` is configured using [**`MRZScannerViewConfig`**]({{ site.ap 8. **Close Scanner Button**: This button closes the MRZ Scanner and takes the user back to the landing page. +> [!NOTE] +> To learn more on how to customize the MRZScannerView and its corresponding UI elements, we recommend reading the [Customizaton Guide]({{ site.guides }}mrz-scanner-customization.html) as that will shed a lot more light on how to customize the scanner UI to fit your needs. + #### `MRZResultView` Here is a quick breakdown of the constituent UI elements of the result view, controlled by [**`MRZResultViewConfig`**]({{ site.api }}mrz-scanner.html#mrzresultviewconfig): @@ -246,4 +249,7 @@ Here is a quick breakdown of the constituent UI elements of the result view, con ## Next Steps -Now that you got the most basic functionality of the MRZ Scanner up and running, it's time to explore the many ways in which you can customize the MRZ Scanner! To learn more about this, please visit [Customizing the MRZ Scanner]({{ site.guides }}mrz-scanner-customization.html). \ No newline at end of file +Now that you got the most basic functionality of the MRZ Scanner up and running, it's time to explore the many ways in which the MRZ Scanner can be used, including customization and the ability to read directly from static images and PDFs. To learn more about those two topics, please visit the following articles + +- [Customizing the MRZ Scanner]({{ site.guides }}mrz-scanner-customization.html) +- [Setting up the MRZ Scanner for Static Images and PDFs]({{ site.guides }}mrz-scanner-static-image.html) \ No newline at end of file diff --git a/index.md b/index.md index 1174a0d..1215a3d 100644 --- a/index.md +++ b/index.md @@ -11,10 +11,11 @@ description: MRZ Scanner JavaScript Edition Documentation Homepage - Developer Guides - [MRZ Scanner User Guide]({{ site.guides }}mrz-scanner.html) - [MRZ Scanner Customization Guide]({{ site.guides }}mrz-scanner-customization.html) + - [MRZ Scanner - Reading from Static Images and PDFs]({{ site.guides }}mrz-scanner-static-image.html) - Getting Started - [System Requirements]({{ site.gettingstarted }}sys_requirement.html) - [Dependencies]({{ site.gettingstarted }}add_dependency.html) - [Code Gallery]({{ site.codegallery }}index.html) -- [API reference]({{ site.api }}index.html) -- [Release notes]({{ site.releasenotes }}index.html) \ No newline at end of file +- [API Reference]({{ site.api }}index.html) +- [Release Notes]({{ site.releasenotes }}index.html) \ No newline at end of file diff --git a/releasenotes/index.md b/releasenotes/index.md index 94b50ca..4faba2d 100644 --- a/releasenotes/index.md +++ b/releasenotes/index.md @@ -12,6 +12,25 @@ permalink: /releasenotes/index.html # Release Notes +## 2.1.0 (05/15/2025) + +## Highlighted Features + +- **[UI]** Redesigned the *MRZScannerView* (the main camera view) to have updated icons and better alignment and spacing. +- Changed the default camera resolution when the camera is opened from **1080p** to **2K** (if the camera supports it). +- Added a new property to the *MRZScannerViewConfig* interface, **showPoweredByDynamsoft**, which controls the visibility of the `Powered By Dynamsoft` message that is part of the *MRZScannerView* UI. +- Introduced the ability for the MRZ Scanner to read MRZs from static images and PDFs without the need to use the *MRZScannerView* UI and the Load Image button. +- Added two new properties to the *MRZScannerViewConfig* interface, **uploadAcceptedTypes** and **uploadFileConverter**, which convert static images and PDFs to blobs which can then be read by the MRZ Scanner. +- Redeveloped the `launch()` method so that it can take a static image or file as input. To learn how to use that, please refer to [Setting up the MRZ Reader for Static Images]({{ site.guides }}mrz-scanner-static-images.html) +- Integrated Dynamsoft's [Mobile Web Capture](https://www.dynamsoft.com/mobile-web-capture/docs/introduction/) with the MRZ Scanner (JavaScript Edition) to allow the user to edit the scanned MRZ image like a document. +- Added `NationalityRaw` and `IssuingStateRaw` to the `MRZData` interface that represent the raw values of these fields + +## Fixes + +- Fixed parsing of German IDs returning `G<<` instead of `G`. +- `engineResourcePaths` is now set before `initLicense` (internally) to prevent a bug when the user wants to implement a custom `engineResourcePaths`. +- Update the trial license banner link to point to https://www.dynamsoft.com/customer/license/trialLicense?product=mrz&deploymenttype=web + ## 2.0.0 (03/13/2025) The **MRZ Scanner JavaScript Edition** has been redesigned and redeveloped to now include a **ready-to-use, fully developed UI** to ease the development process while providing even better functionality.