Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 67 additions & 3 deletions api/document-scanner.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ Starts the **document scanning workflow**.

#### Syntax
```typescript
launch(): Promise<DocumentResult>
async launch(file?: File): Promise<DocumentResult>
```

#### Returns
Expand Down Expand Up @@ -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;
}
```

Expand All @@ -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

Expand Down Expand Up @@ -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`
Expand Down
81 changes: 42 additions & 39 deletions api/mobile-web-capture.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -73,14 +73,15 @@ Starts the **Mobile Web Capture** workflow.

#### Syntax
```typescript
launch(file?: File | string): Promise<void>
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.
Expand Down Expand Up @@ -122,7 +123,7 @@ dispose(): Promise<void>
```

#### Example
```typescript
```javascript
await mobileWebCapture.dispose();
console.log("MWC resources released.");
```
Expand Down Expand Up @@ -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;

Expand All @@ -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

Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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`

Expand All @@ -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

Expand All @@ -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: {
Expand Down
8 changes: 6 additions & 2 deletions guides/document-scanner.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
Loading