diff --git a/api/document-scanner.md b/api/document-scanner.md index 98ec472..ecb4577 100644 --- a/api/document-scanner.md +++ b/api/document-scanner.md @@ -65,7 +65,7 @@ Starts the **document scanning workflow**. #### Syntax ```typescript -launch(): Promise +async launch(file?: File): Promise ``` #### Returns @@ -155,8 +155,16 @@ Configures the scanner view for capturing documents. #### Syntax ```typescript interface DocumentScannerViewConfig { + templateFilePath?: string; cameraEnhancerUIPath?: string; - container?: HTMLElement; + container?: HTMLElement | string; + utilizedTemplateNames?: UtilizedTemplateNames; + enableAutoCropMode?: boolean; + enableSmartCaptureMode?: boolean; + scanRegion: ScanRegion; + minVerifiedFramesForAutoCapture: number; + showSubfooter?: boolean; + showPoweredByDynamsoft?: boolean; } ``` @@ -170,8 +178,10 @@ interface DocumentScannerViewConfig { | `utilizedTemplateNames` | `UtilizedTemplateNames` | Capture Vision template names for detection and correction. | | `enableAutoCropMode` | `boolean` | The default auto-crop mode state. | | `enableSmartCaptureMode` | `boolean` | The default smart capture mode state. | -| `scanRegion` | `ScanRegion` | Defines the region within the viewport to detect documents. | +| `scanRegion` | [`ScanRegion`](#scanregion) | Defines the region within the viewport to detect documents. | | `minVerifiedFramesForAutoCapture` | `number` | The minimum number of camera frames to detect document boundaries on Smart Capture mode. | +| `showSubfooter` | `boolean` | Mode selector menu visibility. | +| `showPoweredByDynamsoft` | `boolean` | Visibility of the Dynamsoft branding message. | #### Example @@ -279,6 +289,60 @@ interface DocumentResult { | `correctedImageResult` | `NormalizedImageResultItem \| DSImageData` | The processed (corrected) image. | | `detectedQuadrilateral` | `Quadrilateral` | The detected document boundaries. | +### `ScanRegion` + +Describes the scan region within the viewfinder for document scanning: + +1. Use the `ratio` property to set the height-to-width of the rectangular scanning region, then scale the rectangle up to fit within the viewfinder. +2. Translate the rectangular up by the number of pixels specified by `regionBottomMargin`. +3. Create a visual border for the scanning region boundary on the viewfinder with a given stroke width in pixels, and a stroke color. + +#### Syntax + +```typescript +interface ScanRegion { + ratio: { + width: number; + height: number; + }; + regionBottomMargin: number; // Bottom margin calculated in pixel + style: { + strokeWidth: number; + strokeColor: string; + }; +} +``` + +#### Properties + +| Property | Type | Description | +| -------------------- | -------- | ---------------------------------------------------------- | +| `ratio` | `object` | The aspect ratio of the rectangular scan region. | +| »`height` | `number` | The height of the rectangular scan region. | +| »`width` | `number` | The width of the rectangular scan region. | +| `regionBottomMargin` | `number` | Bottom margin below the scan region measured in pixels. | +| »`strokeWidth` | `number` | The pixel width of the outline of the scan region. | +| »`strokeColor` | `string` | The color of the outline of the scan region. | +| `style` | `object` | The styling for the scan region outline in the viewfinder. | + +#### Example + +Create a scan region with a height-to-width ratio of 3:2, translated upwards by 20 pixels, with a green, 3 pixel-wide border in the viewfinder: + +```javascript +scanRegion { + ratio: { + width: 2; + height: 3; + }; + regionBottomMargin: 20; + style: { + strokeWidth: 3; + strokeColor: "green"; + }; +} +``` + ## Toolbar Button Configurations ### `ToolbarButtonConfig` diff --git a/api/mobile-web-capture.md b/api/mobile-web-capture.md index b233674..e14c138 100644 --- a/api/mobile-web-capture.md +++ b/api/mobile-web-capture.md @@ -45,9 +45,9 @@ constructor(config: MobileWebCaptureConfig) #### Parameters -| Parameter | Type | Description | -| --------- | ------------------------ | ---------------------------------------------------- | -| `config` | `MobileWebCaptureConfig` | The configuration settings for **MobileWebCapture**. | +| Parameter | Type | Description | +| --------- | --------------------------------------------------- | ---------------------------------------------------- | +| `config` | [`MobileWebCaptureConfig`](#mobilewebcaptureconfig) | The configuration settings for **MobileWebCapture**. | #### Example ```javascript @@ -73,14 +73,15 @@ Starts the **Mobile Web Capture** workflow. #### Syntax ```typescript -launch(file?: File | string): Promise +async launch(file?: File | string, view?: EnumMWCStartingViews) ``` #### Parameters -| Parameter | Type | Description | -| --------- | --------------------------- | ------------------------------------------ | -| `file` | `File \| string` (optional) | A file or document name to open at launch. | +| Parameter | Type | Description | +| --------- | --------------------------------- | ------------------------------------------ | +| `file` | `File \| string` (optional) | A file or document name to open at launch. | +| `view` | `EnumMWCStartingViews` (optional) | The first View to display upon launch. | #### Throws - An error if **MWC** is already running. @@ -122,7 +123,7 @@ dispose(): Promise ``` #### Example -```typescript +```javascript await mobileWebCapture.dispose(); console.log("MWC resources released."); ``` @@ -166,7 +167,7 @@ document.getElementById("initialFile").onchange = async function () { interface MobileWebCaptureConfig { license?: string; container?: HTMLElement | string; - exportConfig?: ExportConffig; + exportConfig?: ExportConfig; showLibraryView?: boolean; onClose?: () => void; @@ -184,23 +185,25 @@ interface MobileWebCaptureConfig { #### Properties -| Property | Type | Description | -| ----------------------- | ----------------------- | -------------------------------------------------------------------------------- | -| `license` | `string` | The license key for using **Mobile Web Capture (MWC)**. | -| `container` | `HTMLElement \| string` | The container element or selector for rendering the `MobileWebCapture` instance. | -| `exportConfig` | `ExportConfig` | Configuration for exporting captured documents. | -| `showLibraryView` | `boolean` | Determines if the **LibraryView** is shown (default: `true`). | -| `onClose` | `() => void` | Callback function triggered when the `MobileWebCapture` instance is closed. | -| `libraryViewConfig` | `LibraryViewConfig` | Configuration for the **LibraryView**. | -| `documentViewConfig` | `DocumentViewConfig` | Configuration for the **DocumentView**. | -| `pageViewConfig` | `PageViewConfig` | Configuration for the **PageView**. | -| `transferViewConfig` | `TransferViewConfig` | Configuration for the **TransferView**. | -| `historyViewConfig` | `HistoryViewConfig` | Configuration for the **HistoryView**. | -| `documentScannerConfig` | `DocumentScannerConfig` | Configuration for the built-in **DocumentScanner**. | +| Property | Type | Description | +| ----------------------- | ------------------------------------------- | -------------------------------------------------------------------------------- | +| `license` | `string` | The license key for using **Mobile Web Capture (MWC)**. | +| `container` | `HTMLElement \| string` | The container element or selector for rendering the `MobileWebCapture` instance. | +| `ddvResourcePath` | `string` | File path to DDV resources. | +| `exportConfig` | [`ExportConfig`](#exportconfig) | Configuration for exporting captured documents. | +| `showLibraryView` | `boolean` | Determines if the **LibraryView** is shown (default: `true`). | +| `onClose` | `() => void` | Callback function triggered when the `MobileWebCapture` instance is closed. | +| `libraryViewConfig` | [`LibraryViewConfig`](#libraryviewconfig) | Configuration for the **LibraryView**. | +| `documentViewConfig` | [`DocumentViewConfig`](#documentviewconfig) | Configuration for the **DocumentView**. | +| `pageViewConfig` | [`PageViewConfig`](#pageviewconfig) | Configuration for the **PageView**. | +| `transferViewConfig` | [`TransferViewConfig`](#transferviewconfig) | Configuration for the **TransferView**. | +| `transferViewConfig` | [`TransferViewConfig`](#transferviewconfig) | Configuration for the **TransferView**. | +| `scanner` | [`MWCScanner`](#mwcscanner) | Configured document scanner module (uses DDS by default). | +| `documentScannerConfig` | `DocumentScannerConfig` | Configuration for the built-in **DocumentScanner**. | ##### See Also -- [DocumentScannerConfig](https://www.dynamsoft.com/mobile-web-capture/docs/api/document-scanner.html#documentscannerconfig) +- [`DocumentScannerConfig`](https://www.dynamsoft.com/mobile-web-capture/docs/api/document-scanner.html#documentscannerconfig) #### Example @@ -236,10 +239,10 @@ interface LibraryViewConfig { #### Properties -| Property | Type | Description | -| ---------------------- | ----------------------------- | ---------------------------------------------------------------------------- | -| `emptyContentConfig` | `EmptyContentConfig` | Configuration for the content displayed on the empty **LibraryView** screen. | -| `toolbarButtonsConfig` | `LibraryToolbarButtonsConfig` | Configuration for the toolbar buttons in **LibraryView**. | +| Property | Type | Description | +| ---------------------- | ------------------------------------------------------------- | ---------------------------------------------------------------------------- | +| `emptyContentConfig` | `EmptyContentConfig` | Configuration for the content displayed on the empty **LibraryView** screen. | +| `toolbarButtonsConfig` | [`LibraryToolbarButtonsConfig`](#librarytoolbarbuttonsconfig) | Configuration for the toolbar buttons in **LibraryView**. | #### Example 1: Display A Message In An Empty Library @@ -293,10 +296,10 @@ interface DocumentViewConfig { #### Properties -| Property | Type | Description | -| ---------------------- | ------------------------------ | ----------------------------------------------------------------------------- | -| `emptyContentConfig` | `EmptyContentConfig` | Configuration for the content displayed on the empty **DocumentView** screen. | -| `toolbarButtonsConfig` | `DocumentToolbarButtonsConfig` | Configuration for the toolbar buttons in **DocumentView**. | +| Property | Type | Description | +| ---------------------- | --------------------------------------------------------------- | ----------------------------------------------------------------------------- | +| `emptyContentConfig` | `EmptyContentConfig` | Configuration for the content displayed on the empty **DocumentView** screen. | +| `toolbarButtonsConfig` | [`DocumentToolbarButtonsConfig`](#documenttoolbarbuttonsconfig) | Configuration for the toolbar buttons in **DocumentView**. | #### Example 1: Display A Message In An Empty Document @@ -418,10 +421,10 @@ interface HistoryViewConfig { #### Properties -| Property | Type | Description | -| ---------------------- | ----------------------------- | ---------------------------------------------------------------------------- | -| `emptyContentConfig` | `EmptyContentConfig` | Configuration for the content displayed on the empty **HistoryView** screen. | -| `toolbarButtonsConfig` | `HistoryToolbarButtonsConfig` | Configuration for the toolbar buttons in **HistoryView**. | +| Property | Type | Description | +| ---------------------- | ------------------------------------------------------------- | ---------------------------------------------------------------------------- | +| `emptyContentConfig` | `EmptyContentConfig` | Configuration for the content displayed on the empty **HistoryView** screen. | +| `toolbarButtonsConfig` | [`HistoryToolbarButtonsConfig`](#historytoolbarbuttonsconfig) | Configuration for the toolbar buttons in **HistoryView**. | ### `TransferViewConfig` @@ -434,9 +437,9 @@ interface TransferViewConfig { #### Properties -| Property | Type | Description | -| ---------------------- | ------------------------------ | ---------------------------------------------------------- | -| `toolbarButtonsConfig` | `TransferToolbarButtonsConfig` | Configuration for the toolbar buttons in **TransferView**. | +| Property | Type | Description | +| ---------------------- | --------------------------------------------------------------- | ---------------------------------------------------------- | +| `toolbarButtonsConfig` | [`TransferToolbarButtonsConfig`](#transfertoolbarbuttonsconfig) | Configuration for the toolbar buttons in **TransferView**. | ## Toolbar Button Configurations @@ -458,7 +461,7 @@ export type ToolbarButtonConfig = Pick<"icon" | "label" | "isHidden">; | `isHidden` | `boolean` (optional) | Determines if the button is hidden. | #### Example -```typescript +```javascript const mobileWebCapture = new Dynamsoft.MobileWebCapture({ license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key documentViewConfig: { diff --git a/guides/document-scanner.md b/guides/document-scanner.md index 261826e..3c7a35e 100644 --- a/guides/document-scanner.md +++ b/guides/document-scanner.md @@ -540,10 +540,14 @@ interface ScanRegion { } ``` +API Reference: + +[`ScanRegion`](https://www.dynamsoft.com/mobile-web-capture/docs/api/document-scanner.html#scanregion) + Here is how the scanning region is set: -1. The `ratio` property sets the height-to-width of the scanning region rectangle, then scales the rectangle up to fit within the viewfinder. -2. Translate this rectangle up by the number of pixels specified by `regionBottomMargin`. +1. Use the `ratio` property to set the height-to-width of the rectangular scanning region, then scale the rectangle up to fit within the viewfinder. +2. Translate the rectangular up by the number of pixels specified by `regionBottomMargin`. 3. Create a visual border for the scanning region boundary on the viewfinder with a given stroke width in pixels, and a stroke color. For example: diff --git a/releasenotes/index.md b/releasenotes/index.md index f4d2151..f2230a4 100644 --- a/releasenotes/index.md +++ b/releasenotes/index.md @@ -12,67 +12,89 @@ permalink: /releasenotes/index.html # Release Notes +## 3.1.0 (05/01/2025) + +The most notable improvement in this version is the pluggable scanner feature. This allows MWC to integrate any custom scanner, e.g. our existing [MRZ scanner]. + +### Features + +1. Add Pluggable Scanner feature which integrates any scanner satisfying the following: + 1. Implements the `ImplementMWCScanner` interface + 2. Implements a `launch()` method to return a result that includes: + 1. `_imageData` with a `toBlob()` function + 2. `status.code` equal to `EnumresultStatus.RS_SUCCESS` +2. Update Document Scanner to [version 1.2](https://github.com/Dynamsoft/document-scanner-javascript/releases/tag/v1.2.0) +3. Change MWC Header color to make the component visually distinct +4. Move the "Select All" and "Cancel" buttons to the header in the Document View + +### Fixes + +1. The select mode now toggles off after deleting a page on Document View + ## 3.0.1 (02/07/2025) * Fixed a bug in the Document Result View where the **Download** button icon was not displayed. ## 3.0.0 (02/07/2025) -**⚠ IMPORTANT NOTE:This is a Beta Version** +> [!IMPORTANT] +> **This is a Beta Version** -In this release, **Mobile Web Capture (MWC)** has been completely redesigned from the ground up. It is now a **ready-to-use, fully developed,** browser-based document management system for mobile devices. +In this release, **Mobile Web Capture (MWC)** has been completely redesigned from the ground up. It is now a **ready-to-use, fully developed,** browser-based document management system for mobile devices. -## Highlighted Features +### Highlighted Features -- Automatic document detection and image capture -- Scan and organize pages into a document -- Organize multiple documents in a library -- Full suite of PDF annotation and editing tools -- Upload documents to a server or save them locally -- Ready-to-use and flexible document scanning workflow +- Automatic document detection and image capture +- Scan and organize pages into a document +- Organize multiple documents in a library +- Full suite of PDF annotation and editing tools +- Upload documents to a server or save them locally +- Ready-to-use and flexible document scanning workflow - Modular, view-based design for easy maintenance and customization -## Views +### Views -**MWC** features are organized into configurable UI views. Below is an overview of their main functionalities: +**MWC** features are organized into configurable UI views. Below is an overview of their main functionalities: -> Learn more in the [MWC user guide](https://www.dynamsoft.com/mobile-web-capture/docs/guides/mobile-web-capture.html). +> [!TIP] +> Learn more in the [MWC user guide](https://www.dynamsoft.com/mobile-web-capture/docs/guides/mobile-web-capture.html). -### Library View -- Organize and manage multiple scanned documents -- Export, delete, share, or print documents -- View upload history for server-stored documents +#### Library View +- Organize and manage multiple scanned documents +- Export, delete, share, or print documents +- View upload history for server-stored documents -### Document View -- View page thumbnails -- Reorder or delete pages -- Export or share documents +#### Document View +- View page thumbnails +- Reorder or delete pages +- Export or share documents -### Page View -- Close-up view of single pages -- Upload or save individual pages -- Full-featured annotations, including inking, shapes, highlighting, text boxes, signatures, and more +#### Page View +- Close-up view of single pages +- Upload or save individual pages +- Full-featured annotations, including inking, shapes, highlighting, text boxes, signatures, and more -### Transfer View -- Copy or move pages between documents +#### Transfer View +- Copy or move pages between documents -### History View +#### History View - View upload history -> The following three views are powered by **Dynamsoft Document Scanner (DDS)**. Learn more in the [DDS user guide](https://www.dynamsoft.com/mobile-web-capture/docs/guides/document-scanner.html). +> [!NOTE] +> The following three views are powered by **Dynamsoft Document Scanner (DDS)**. Learn more in the [DDS user guide](https://www.dynamsoft.com/mobile-web-capture/docs/guides/document-scanner.html). -### Document Scanner View -- Camera viewfinder with resolution toggle and more -- Automatic document detection and capture from the optimal frame in the video feed -- Manual capture for greater control +#### Document Scanner View +- Camera viewfinder with resolution toggle and more +- Automatic document detection and capture from the optimal frame in the video feed +- Manual capture for greater control -### Document Correction View -- Fine-tune automatically detected document boundaries +#### Document Correction View +- Fine-tune automatically detected document boundaries -### Document Result View -- Preview the corrected scan -- Quickly re-scan and inspect documents until the desired result is achieved -- Share the scanned document or save it locally +#### Document Result View +- Preview the corrected scan +- Quickly re-scan and inspect documents until the desired result is achieved +- Share the scanned document or save it locally ## 2.0.0 (09/03/2024)