diff --git a/api/document-scanner.md b/api/document-scanner.md
deleted file mode 100644
index a2012ae..0000000
--- a/api/document-scanner.md
+++ /dev/null
@@ -1,451 +0,0 @@
----
-layout: default-layout
-needAutoGenerateSidebar: true
-needGenerateH3Content: true
-noTitleIndex: false
-title: Dynamsoft Document Scanner - API Reference
-keywords: Documentation, Mobile Web Capture, Dynamsoft Document Scanner, API, APIs
-breadcrumbText: API References
-description: Dynamsoft Document Scanner - API Reference
----
-
-# Dynamsoft Document Scanner API Reference
-
-The `DocumentScanner` class handles the document scanning process, including image capture, correction, and result display.
-
-
-
-## Constructor
-
-### `DocumentScanner`
-
-#### Syntax
-```typescript
-new DocumentScanner(config: DocumentScannerConfig)
-```
-
-#### Parameters
-- `config` ([`DocumentScannerConfig`](#documentscannerconfig)) : Configuration settings for the scanner, including license, container, view settings and more.
-
-#### Example
-
-```html
-
-```
-
-```javascript
-const documentScanner = new Dynamsoft.DocumentScanner({
- license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
- scannerViewConfig: {
- container: document.getElementById("myDocumentScannerViewContainer") // Use this container for the scanner view
- }
-});
-```
-
-## Methods
-
-### `launch()`
-
-Starts the **document scanning workflow**.
-
-#### Syntax
-```typescript
-async launch(file?: File): Promise
-```
-
-#### Returns
-- A `Promise` resolving to a [`DocumentResult`](#documentresult) object.
-
-#### Example
-```typescript
-const result = await documentScanner.launch();
-
-if (result?.correctedImageResult) {
- resultContainer.innerHTML = "";
- const canvas = result.correctedImageResult.toCanvas();
- resultContainer.appendChild(canvas);
-} else {
- resultContainer.innerHTML = "
No image scanned. Please try again.
";
-}
-```
-
-### `dispose()`
-
-Cleans up resources and hides UI components.
-
-#### Syntax
-```typescript
-dispose(): void
-```
-
-#### Example
-```typescript
-documentScanner.dispose();
-console.log("Scanner resources released.");
-```
-
-## Configuration Interfaces
-
-### `DocumentScannerConfig`
-
-#### Syntax
-```typescript
-interface DocumentScannerConfig {
- license?: string;
- container?: HTMLElement | string;
- scannerViewConfig?: DocumentScannerViewConfig;
- resultViewConfig?: DocumentResultViewConfig;
- correctionViewConfig?: DocumentCorrectionViewConfig;
- templateFilePath?: string;
- utilizedTemplateNames?: UtilizedTemplateNames;
- engineResourcePaths: EngineResourcePaths;
-}
-```
-
-#### Properties
-
-| Property | Type | Description |
-| ----------------------- | --------------------------------------------------------------- | --------------------------------------------------------- |
-| `license` | `string` | The license key for using the `DocumentScanner`. |
-| `container` | ``HTMLElement | string`` | The container element or selector for the `DocumentScanner` UI. |
-| `scannerViewConfig` | [`DocumentScannerViewConfig`](#documentscannerconfig) | Configuration settings for the scanner view. |
-| `resultViewConfig` | [`DocumentResultViewConfig`](#documentresultviewconfig) | Configuration settings for the result view. |
-| `correctionViewConfig` | [`DocumentCorrectionViewConfig`](#documentcorrectionviewconfig) | Configuration settings for the correction view. |
-| `templateFilePath` | `string` | The file path to the document template used for scanning. |
-| `utilizedTemplateNames` | [`UtilizedTemplateNames`](#utilizedtemplatenames) | Specifies detection and correction templates. |
-| `engineResourcePaths` | [`EngineResourcePaths`](#engineresourcepaths) | Paths to the necessary resources for the scanning engine. |
-
-#### Example
-```typescript
-const config = {
- license: "YOUR_LICENSE_KEY_HERE",
- scannerViewConfig: {
- cameraEnhancerUIPath: "./dist/document-scanner.ui.html", // Use the local file
- },
- engineResourcePaths: {
- std: "./dist/libs/dynamsoft-capture-vision-std/dist/",
- dip: "./dist/libs/dynamsoft-image-processing/dist/",
- core: "./dist/libs/dynamsoft-core/dist/",
- license: "./dist/libs/dynamsoft-license/dist/",
- cvr: "./dist/libs/dynamsoft-capture-vision-router/dist/",
- ddn: "./dist/libs/dynamsoft-document-normalizer/dist/",
- },
-};
-```
-
-### `DocumentScannerViewConfig`
-
-Configures the scanner view for capturing documents.
-
-#### Syntax
-```typescript
-interface DocumentScannerViewConfig {
- templateFilePath?: string;
- cameraEnhancerUIPath?: string;
- container?: HTMLElement | string;
- utilizedTemplateNames?: UtilizedTemplateNames;
- enableAutoCropMode?: boolean;
- enableSmartCaptureMode?: boolean;
- scanRegion: ScanRegion;
- minVerifiedFramesForAutoCapture: number;
- showSubfooter?: boolean;
- showPoweredByDynamsoft?: boolean;
-}
-```
-
-#### Properties
-
-| Property | Type | Description |
-| --------------------------------- | --------------------------------------------------- | ---------------------------------------------------------------------------------------- |
-| `templateFilePath` | `string` | Path to a Capture Vision template for scanning configuration. |
-| `cameraEnhancerUIPath` | `string` | Path to the UI (`.html` template file) for the scanner view. |
-| `container` | `HTMLElement` | The container element for the scanner view. |
-| `utilizedTemplateNames` | `[`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`](#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
-
-```javascript
-const documentScanner = new Dynamsoft.DocumentScanner({
- license: "YOUR_LICENSE_KEY_HERE", // Replace with your actual license key
- scannerViewConfig: {
- cameraEnhancerUIPath: "../dist/document-scanner.ui.html", // Use the local file
- },
-});
-```
-
-### `DocumentCorrectionViewConfig`
-
-Configures the correction view for adjusting scanned documents, including toolbar buttons and event handlers for completion.
-
-#### Syntax
-```typescript
-interface DocumentCorrectionViewConfig {
- container?: HTMLElement;
- toolbarButtonsConfig?: DocumentCorrectionViewToolbarButtonsConfig;
- onFinish?: (result: DocumentResult) => void;
-}
-```
-
-#### Properties
-
-| Property | Type | Description |
-| ---------------------- | ------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
-| `container` | `HTMLElement` | The container element for the correction view. |
-| `toolbarButtonsConfig` | [`DocumentCorrectionViewToolbarButtonsConfig`](#documentcorrectionviewtoolbarbuttonsconfig) | Configuration for toolbar buttons in the correction view. |
-| `onFinish` | `(result: DocumentResult) => void` | Callback function triggered when correction is finished. |
-
-#### Example
-
-```javascript
-const documentScanner = new Dynamsoft.DocumentScanner({
- license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
- correctionViewConfig: {
- onFinish: (result) => {
- const canvas = result.correctedImageResult.toCanvas();
- resultContainer.appendChild(canvas);
- }
- }
-});
-```
-
-### `DocumentResultViewConfig`
-
-Configures the result view for reviewing scanned documents, including toolbar buttons and event handlers for uploads and completion.
-
-#### Syntax
-```typescript
-interface DocumentResultViewConfig {
- container?: HTMLElement;
- toolbarButtonsConfig?: DocumentResultViewToolbarButtonsConfig;
- onDone?: (result: DocumentResult) => Promise;
- onUpload?: (result: DocumentResult) => Promise;
-}
-```
-
-#### Properties
-
-| Property | Type | Description |
-| ---------------------- | ----------------------------------------------------------------------------------- | ----------------------------------------------------------- |
-| `container` | `HTMLElement` | The container element for the result view. |
-| `toolbarButtonsConfig` | [`DocumentResultViewToolbarButtonsConfig`](#documentresultviewtoolbarbuttonsconfig) | Configuration for toolbar buttons in the result view. |
-| `onDone` | `(result: DocumentResult) => Promise` | Callback function triggered when scanning is done. |
-| `onUpload` | `(result: DocumentResult) => Promise` | Callback function triggered when uploading the scan result. |
-
-#### Example
-```javascript
-const documentScanner = new Dynamsoft.DocumentScanner({
- license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
- resultViewConfig: {
- onDone: async (result) =>
- {
- const canvas = result.correctedImageResult.toCanvas();
- resultContainer.appendChild(canvas);
- }
- }
-});
-```
-
-### `DocumentResult`
-
-Represents the output of a scan, including the original and corrected images, detected boundaries, and scan status.
-
-#### Syntax
-```typescript
-interface DocumentResult {
- status: ResultStatus;
- correctedImageResult?: NormalizedImageResultItem | DSImageData;
- originalImageResult?: OriginalImageResultItem["imageData"];
- detectedQuadrilateral?: Quadrilateral;
-}
-```
-
-#### Properties
-
-| Property | Type | Description |
-| ----------------------- | ------------------------------------------- | ------------------------------------------------------------ |
-| `status` | `ResultStatus` | The status of the document scan (success, failed, canceled). |
-| `originalImageResult` | `OriginalImageResultItem["imageData"]` | The original captured image before correction. |
-| `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`
-
-A simplified configuration type for toolbar buttons.
-
-#### Syntax
-```typescript
-export type ToolbarButtonConfig = Pick<"icon" | "label" | "isHidden">;
-```
-
-#### Properties
-
-| Property | Type | Description |
-| ---------- | -------------------- | ----------------------------------- |
-| `icon` | `string` | The icon displayed on the button. |
-| `label` | `string` | The text label for the button. |
-| `isHidden` | `boolean` (optional) | Determines if the button is hidden. |
-
-#### Example
-```typescript
-const documentScanner = new Dynamsoft.DocumentScanner({
- license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
- correctionViewConfig: {
- toolbarButtonsConfig: {
- fullImage: {
- isHidden: true
- },
- detectBorders: {
- icon: "path/to/new_icon.png", // Change to the actual path of the new icon
- label: "Custom Label"
- }
- }
- }
-});
-```
-
-### Configurable Buttons Per Each View
-
-#### DocumentCorrectionViewToolbarButtonsConfig
-
-##### Syntax
-
-```typescript
-interface DocumentCorrectionViewToolbarButtonsConfig {
- fullImage?: ToolbarButtonConfig;
- detectBorders?: ToolbarButtonConfig;
- apply?: ToolbarButtonConfig;
-}
-```
-
-#### DocumentResultViewToolbarButtonsConfig
-
-##### Syntax
-
-```typescript
-interface DocumentResultViewToolbarButtonsConfig {
- retake?: ToolbarButtonConfig;
- correct?: ToolbarButtonConfig;
- share?: ToolbarButtonConfig;
- upload?: ToolbarButtonConfig;
- done?: ToolbarButtonConfig;
-}
-```
-
-## Assisting Interfaces
-
-### `UtilizedTemplateNames`
-
-[Dynamsoft Capture Vision template](https://www.dynamsoft.com/capture-vision/docs/core/parameters/file/capture-vision-template.html?lang=javascript) names for detection and correction. This typically does not need to be set, as DDS uses the default template.
-
-#### Syntax
-
-```typescript
-interface UtilizedTemplateNames {
- detect: string;
- normalize: string;
-}
-```
-
-### `EngineResourcePaths`
-
-Paths to extra resources such as `.wasm` engine files. The default paths point to CDNs and so may be left unset. You may set custom paths for the purpose of [self-hosting resources]({{ site.guides }}mobile-web-capture-customization.html#self-hosting-resource-files).
-
-#### Syntax
-
-```typescript
-interface EngineResourcePaths {
- "rootDirectory"?: string;
- "std"?: string | PathInfo;
- "dip"?: string | PathInfo;
- "dnn"?: string | PathInfo;
- "core"?: string | PathInfo;
- "license"?: string | PathInfo;
- "cvr"?: string | PathInfo;
- "utility"?: string | PathInfo;
- "dbr"?: string | PathInfo;
- "dlr"?: string | PathInfo;
- "ddn"?: string | PathInfo;
- "dcp"?: string | PathInfo;
- "dce"?: string | PathInfo;
- "dlrData"?: string | PathInfo;
- "ddv"?: string | PathInfo;
- "dwt"?: string | DwtInfo;
-}
-```
diff --git a/api/index-v3.0.md b/api/index-v3.0.md
index a45a99a..2196abc 100644
--- a/api/index-v3.0.md
+++ b/api/index-v3.0.md
@@ -8,20 +8,20 @@ keywords: Documentation, Mobile Web Capture, API Index
description: Mobile Web Capture Documentation API Reference Index
---
-# API Reference Index
+# API Reference Index
-## Scan Single-Page Documents
+## Scan Single-Page Documents
-If you need to scan single-page documents and do not require handling PDF files (import or export), you only need **Dynamsoft Document Scanner (DDS)**, a component of **Mobile Web Capture (MWC)**. You can find its API reference here:
+If you need to scan single-page documents and do not require handling PDF files (import or export), you only need **Dynamsoft Document Scanner (DDS)**, a component of **Mobile Web Capture (MWC)**. You can find its API reference here:
-- [Dynamsoft Document Scanner API Reference]({{ site.api }}document-scanner.html)
+- [Dynamsoft Document Scanner API Reference]({{ site.api }}document-scanner.html)
-> See it in action with the [Dynamsoft Document Scanner Demo](https://demo.dynamsoft.com/document-scanner/).
+> See it in action with the [Dynamsoft Document Scanner Demo](https://demo.dynamsoft.com/document-scanner/).
-## Scan Multi-Page Documents
+## Scan Multi-Page Documents
-If you need to handle multi-page documents, PDF files, annotations, and more, you will need the full-featured **Mobile Web Capture (MWC)**. You can find its API reference here:
+If you need to handle multi-page documents, PDF files, annotations, and more, you will need the full-featured **Mobile Web Capture (MWC)**. You can find its API reference here:
-- [Mobile Web Capture API Reference]({{ site.api }}mobile-web-capture.html)
+- [Mobile Web Capture API Reference]({{ site.code-gallery }}}mobile-web-capture/api.html)
-> See it in action with the [Mobile Web Capture Demo](https://demo.dynamsoft.com/mobile-web-capture/).
+> See it in action with the [Mobile Web Capture Demo](https://demo.dynamsoft.com/mobile-web-capture/).
diff --git a/api/index.md b/api/index.md
index b69240a..d63326d 100644
--- a/api/index.md
+++ b/api/index.md
@@ -2,28 +2,450 @@
layout: default-layout
needAutoGenerateSidebar: true
needGenerateH3Content: true
-noTitleIndex: true
-title: Mobile Web Capture - API Reference Index
-keywords: Documentation, Mobile Web Capture, API Index
-description: Mobile Web Capture Documentation API Reference Index
+noTitleIndex: false
+title: Mobile Document Scanner JS Edition - API Reference
+keywords: Documentation, Mobile Document Scanner, Web, JS Edition, Dynamsoft Document Scanner, API, APIs
+breadcrumbText: API References
+description: Mobile Document Scanner JS Edition - API Reference
---
-# API Reference Index
+# Mobile Document Scanner API Reference
-## Scan Single-Page Documents
+The `DocumentScanner` class handles the document scanning process, including image capture, correction, and result display.
-If you need to scan single-page documents and do not require handling PDF files (import or export), you only need **Dynamsoft Document Scanner (DDS)**, a component of **Mobile Web Capture (MWC)**. You can find its API reference here:
+
-- [Dynamsoft Document Scanner API Reference]({{ site.api }}document-scanner.html)
+## Constructor
-> [!TIP]
-> See it in action with the [Dynamsoft Document Scanner Demo](https://demo.dynamsoft.com/document-scanner/).
+### `DocumentScanner`
-## Scan Multi-Page Documents
+#### Syntax
+```typescript
+new DocumentScanner(config: DocumentScannerConfig)
+```
-If you need to handle multi-page documents, PDF files, annotations, and more, you will need the full-featured **Mobile Web Capture (MWC)**. You can find its API reference here:
+#### Parameters
+- `config` ([`DocumentScannerConfig`](#documentscannerconfig)) : Configuration settings for the scanner, including license, container, view settings and more.
-- [Mobile Web Capture API Reference]({{ site.api }}mobile-web-capture.html)
+#### Example
-> [!TIP]
-> See it in action with the [Mobile Web Capture Demo](https://demo.dynamsoft.com/mobile-web-capture/).
+```html
+
+```
+
+```javascript
+const documentScanner = new Dynamsoft.DocumentScanner({
+ license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
+ scannerViewConfig: {
+ container: document.getElementById("myDocumentScannerViewContainer") // Use this container for the scanner view
+ }
+});
+```
+
+## Methods
+
+### `launch()`
+
+Starts the **document scanning workflow**.
+
+#### Syntax
+```typescript
+async launch(file?: File): Promise
+```
+
+#### Returns
+- A `Promise` resolving to a [`DocumentResult`](#documentresult) object.
+
+#### Example
+```typescript
+const result = await documentScanner.launch();
+
+if (result?.correctedImageResult) {
+ resultContainer.innerHTML = "";
+ const canvas = result.correctedImageResult.toCanvas();
+ resultContainer.appendChild(canvas);
+} else {
+ resultContainer.innerHTML = "
No image scanned. Please try again.
";
+}
+```
+
+### `dispose()`
+
+Cleans up resources and hides UI components.
+
+#### Syntax
+```typescript
+dispose(): void
+```
+
+#### Example
+```typescript
+documentScanner.dispose();
+console.log("Scanner resources released.");
+```
+
+## Configuration Interfaces
+
+### `DocumentScannerConfig`
+
+#### Syntax
+```typescript
+interface DocumentScannerConfig {
+ license?: string;
+ container?: HTMLElement | string;
+ scannerViewConfig?: DocumentScannerViewConfig;
+ resultViewConfig?: DocumentResultViewConfig;
+ correctionViewConfig?: DocumentCorrectionViewConfig;
+ templateFilePath?: string;
+ utilizedTemplateNames?: UtilizedTemplateNames;
+ engineResourcePaths: EngineResourcePaths;
+}
+```
+
+#### Properties
+
+| Property | Type | Description |
+| ----------------------- | --------------------------------------------------------------- | --------------------------------------------------------- |
+| `license` | `string` | The license key for using the `DocumentScanner`. |
+| `container` | ``HTMLElement | string`` | The container element or selector for the `DocumentScanner` UI. |
+| `scannerViewConfig` | [`DocumentScannerViewConfig`](#documentscannerconfig) | Configuration settings for the scanner view. |
+| `resultViewConfig` | [`DocumentResultViewConfig`](#documentresultviewconfig) | Configuration settings for the result view. |
+| `correctionViewConfig` | [`DocumentCorrectionViewConfig`](#documentcorrectionviewconfig) | Configuration settings for the correction view. |
+| `templateFilePath` | `string` | The file path to the document template used for scanning. |
+| `utilizedTemplateNames` | [`UtilizedTemplateNames`](#utilizedtemplatenames) | Specifies detection and correction templates. |
+| `engineResourcePaths` | [`EngineResourcePaths`](#engineresourcepaths) | Paths to the necessary resources for the scanning engine. |
+
+#### Example
+```typescript
+const config = {
+ license: "YOUR_LICENSE_KEY_HERE",
+ scannerViewConfig: {
+ cameraEnhancerUIPath: "./dist/document-scanner.ui.html", // Use the local file
+ },
+ engineResourcePaths: {
+ std: "./dist/libs/dynamsoft-capture-vision-std/dist/",
+ dip: "./dist/libs/dynamsoft-image-processing/dist/",
+ core: "./dist/libs/dynamsoft-core/dist/",
+ license: "./dist/libs/dynamsoft-license/dist/",
+ cvr: "./dist/libs/dynamsoft-capture-vision-router/dist/",
+ ddn: "./dist/libs/dynamsoft-document-normalizer/dist/",
+ },
+};
+```
+
+### `DocumentScannerViewConfig`
+
+Configures the scanner view for capturing documents.
+
+#### Syntax
+```typescript
+interface DocumentScannerViewConfig {
+ templateFilePath?: string;
+ cameraEnhancerUIPath?: string;
+ container?: HTMLElement | string;
+ utilizedTemplateNames?: UtilizedTemplateNames;
+ enableAutoCropMode?: boolean;
+ enableSmartCaptureMode?: boolean;
+ scanRegion: ScanRegion;
+ minVerifiedFramesForAutoCapture: number;
+ showSubfooter?: boolean;
+ showPoweredByDynamsoft?: boolean;
+}
+```
+
+#### Properties
+
+| Property | Type | Description |
+| --------------------------------- | --------------------------------------------------- | ---------------------------------------------------------------------------------------- |
+| `templateFilePath` | `string` | Path to a Capture Vision template for scanning configuration. |
+| `cameraEnhancerUIPath` | `string` | Path to the UI (`.html` template file) for the scanner view. |
+| `container` | `HTMLElement` | The container element for the scanner view. |
+| `utilizedTemplateNames` | `[`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`](#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
+
+```javascript
+const documentScanner = new Dynamsoft.DocumentScanner({
+ license: "YOUR_LICENSE_KEY_HERE", // Replace with your actual license key
+ scannerViewConfig: {
+ cameraEnhancerUIPath: "../dist/document-scanner.ui.html", // Use the local file
+ },
+});
+```
+
+### `DocumentCorrectionViewConfig`
+
+Configures the correction view for adjusting scanned documents, including toolbar buttons and event handlers for completion.
+
+#### Syntax
+```typescript
+interface DocumentCorrectionViewConfig {
+ container?: HTMLElement;
+ toolbarButtonsConfig?: DocumentCorrectionViewToolbarButtonsConfig;
+ onFinish?: (result: DocumentResult) => void;
+}
+```
+
+#### Properties
+
+| Property | Type | Description |
+| ---------------------- | ------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
+| `container` | `HTMLElement` | The container element for the correction view. |
+| `toolbarButtonsConfig` | [`DocumentCorrectionViewToolbarButtonsConfig`](#documentcorrectionviewtoolbarbuttonsconfig) | Configuration for toolbar buttons in the correction view. |
+| `onFinish` | `(result: DocumentResult) => void` | Callback function triggered when correction is finished. |
+
+#### Example
+
+```javascript
+const documentScanner = new Dynamsoft.DocumentScanner({
+ license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
+ correctionViewConfig: {
+ onFinish: (result) => {
+ const canvas = result.correctedImageResult.toCanvas();
+ resultContainer.appendChild(canvas);
+ }
+ }
+});
+```
+
+### `DocumentResultViewConfig`
+
+Configures the result view for reviewing scanned documents, including toolbar buttons and event handlers for uploads and completion.
+
+#### Syntax
+```typescript
+interface DocumentResultViewConfig {
+ container?: HTMLElement;
+ toolbarButtonsConfig?: DocumentResultViewToolbarButtonsConfig;
+ onDone?: (result: DocumentResult) => Promise;
+ onUpload?: (result: DocumentResult) => Promise;
+}
+```
+
+#### Properties
+
+| Property | Type | Description |
+| ---------------------- | ----------------------------------------------------------------------------------- | ----------------------------------------------------------- |
+| `container` | `HTMLElement` | The container element for the result view. |
+| `toolbarButtonsConfig` | [`DocumentResultViewToolbarButtonsConfig`](#documentresultviewtoolbarbuttonsconfig) | Configuration for toolbar buttons in the result view. |
+| `onDone` | `(result: DocumentResult) => Promise` | Callback function triggered when scanning is done. |
+| `onUpload` | `(result: DocumentResult) => Promise` | Callback function triggered when uploading the scan result. |
+
+#### Example
+```javascript
+const documentScanner = new Dynamsoft.DocumentScanner({
+ license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
+ resultViewConfig: {
+ onDone: async (result) =>
+ {
+ const canvas = result.correctedImageResult.toCanvas();
+ resultContainer.appendChild(canvas);
+ }
+ }
+});
+```
+
+### `DocumentResult`
+
+Represents the output of a scan, including the original and corrected images, detected boundaries, and scan status.
+
+#### Syntax
+```typescript
+interface DocumentResult {
+ status: ResultStatus;
+ correctedImageResult?: NormalizedImageResultItem | DSImageData;
+ originalImageResult?: OriginalImageResultItem["imageData"];
+ detectedQuadrilateral?: Quadrilateral;
+}
+```
+
+#### Properties
+
+| Property | Type | Description |
+| ----------------------- | ------------------------------------------- | ------------------------------------------------------------ |
+| `status` | `ResultStatus` | The status of the document scan (success, failed, canceled). |
+| `originalImageResult` | `OriginalImageResultItem["imageData"]` | The original captured image before correction. |
+| `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`
+
+A simplified configuration type for toolbar buttons.
+
+#### Syntax
+```typescript
+export type ToolbarButtonConfig = Pick<"icon" | "label" | "isHidden">;
+```
+
+#### Properties
+
+| Property | Type | Description |
+| ---------- | -------------------- | ----------------------------------- |
+| `icon` | `string` | The icon displayed on the button. |
+| `label` | `string` | The text label for the button. |
+| `isHidden` | `boolean` (optional) | Determines if the button is hidden. |
+
+#### Example
+```typescript
+const documentScanner = new Dynamsoft.DocumentScanner({
+ license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
+ correctionViewConfig: {
+ toolbarButtonsConfig: {
+ fullImage: {
+ isHidden: true
+ },
+ detectBorders: {
+ icon: "path/to/new_icon.png", // Change to the actual path of the new icon
+ label: "Custom Label"
+ }
+ }
+ }
+});
+```
+
+### Configurable Buttons Per Each View
+
+#### DocumentCorrectionViewToolbarButtonsConfig
+
+##### Syntax
+
+```typescript
+interface DocumentCorrectionViewToolbarButtonsConfig {
+ fullImage?: ToolbarButtonConfig;
+ detectBorders?: ToolbarButtonConfig;
+ apply?: ToolbarButtonConfig;
+}
+```
+
+#### DocumentResultViewToolbarButtonsConfig
+
+##### Syntax
+
+```typescript
+interface DocumentResultViewToolbarButtonsConfig {
+ retake?: ToolbarButtonConfig;
+ correct?: ToolbarButtonConfig;
+ share?: ToolbarButtonConfig;
+ upload?: ToolbarButtonConfig;
+ done?: ToolbarButtonConfig;
+}
+```
+
+## Assisting Interfaces
+
+### `UtilizedTemplateNames`
+
+[Dynamsoft Capture Vision template](https://www.dynamsoft.com/capture-vision/docs/core/parameters/file/capture-vision-template.html?lang=javascript) names for detection and correction. This typically does not need to be set, as DDS uses the default template.
+
+#### Syntax
+
+```typescript
+interface UtilizedTemplateNames {
+ detect: string;
+ normalize: string;
+}
+```
+
+### `EngineResourcePaths`
+
+Paths to extra resources such as `.wasm` engine files. The default paths point to CDNs and so may be left unset. You may set custom paths for the purpose of [self-hosting resources]({{ site.code-gallery }}mobile-web-capture/customization-guide.html#self-hosting-resource-files).
+
+#### Syntax
+
+```typescript
+interface EngineResourcePaths {
+ "rootDirectory"?: string;
+ "std"?: string | PathInfo;
+ "dip"?: string | PathInfo;
+ "dnn"?: string | PathInfo;
+ "core"?: string | PathInfo;
+ "license"?: string | PathInfo;
+ "cvr"?: string | PathInfo;
+ "utility"?: string | PathInfo;
+ "dbr"?: string | PathInfo;
+ "dlr"?: string | PathInfo;
+ "ddn"?: string | PathInfo;
+ "dcp"?: string | PathInfo;
+ "dce"?: string | PathInfo;
+ "dlrData"?: string | PathInfo;
+ "ddv"?: string | PathInfo;
+ "dwt"?: string | DwtInfo;
+}
+```
diff --git a/code-gallery/frameworks.md b/code-gallery/frameworks.md
index 59da7b1..2fc4f65 100644
--- a/code-gallery/frameworks.md
+++ b/code-gallery/frameworks.md
@@ -3,16 +3,15 @@ layout: default-layout
# needAutoGenerateSidebar: true
# needGenerateH3Content: true
# noTitleIndex: false
-title: Mobile Web Capture - Frameworks
-keywords: Documentation, Mobile Web Capture, frameworks, web frameworks, angular, vue, react
+title: Mobile Document Scanner JS Edition - Frameworks
+keywords: Documentation, Mobile Document Scanner, Web, JS Edition, Mobile Web Capture, frameworks, web frameworks, angular, vue, react
breadcrumbText: Frameworks
description: Mobile Web Capture Framework Samples
-permalink: /code-gallery/frameworks.html
---
# Frameworks
-Dynamsoft provides samples that show how to integrate Dynamsoft Document Scanner and Mobile Web Capture in various frameworks. We recommend using our samples as references when building web applications with DDS and MWC with frameworks.
+Dynamsoft provides samples that show how to integrate Mobile Document Scanner and Mobile Web Capture in various frameworks. We recommend using our samples as references when building web applications with MDS and MWC with frameworks.
> [!NOTE]
> Please [contact us](https://www.dynamsoft.com/company/contact/) for any inquiries about currently unsupported frameworks.
@@ -24,3 +23,5 @@ We host samples with Hello World implementations of DDS and MWC on GitHub, in th
### Mobile Web Capture
- [Angular](https://github.com/Dynamsoft/mobile-web-capture/tree/master/samples/frameworks/angular)
+- [React](https://github.com/Dynamsoft/mobile-web-capture/tree/master/samples/frameworks/react-hooks)
+- [Vue](https://github.com/Dynamsoft/mobile-web-capture/tree/master/samples/frameworks/vue)
diff --git a/api/mobile-web-capture.md b/code-gallery/mobile-web-capture/api.md
similarity index 98%
rename from api/mobile-web-capture.md
rename to code-gallery/mobile-web-capture/api.md
index a5d9056..fed9cef 100644
--- a/api/mobile-web-capture.md
+++ b/code-gallery/mobile-web-capture/api.md
@@ -4,7 +4,7 @@ needAutoGenerateSidebar: true
needGenerateH3Content: true
noTitleIndex: false
title: Dynamsoft Mobile Web Capture - API Reference
-keywords: Documentation, Mobile Web Capture, Dynamsoft Document Scanner, API, APIs
+keywords: Documentation, Mobile Document Scanner, Web, JS Edition, Dynamsoft Document Scanner, API, APIs
breadcrumbText: API Reference
description: Mobile Web Capture API Reference
---
@@ -69,7 +69,7 @@ const mobileWebCapture = new Dynamsoft.MobileWebCapture({
### `launch()`
-Starts the **Mobile Web Capture** workflow.
+Starts the **Mobile Web Capture** workflow.
#### Syntax
```typescript
@@ -106,7 +106,7 @@ document.getElementById("initialFile").onchange = async function () {
const files = Array.from(this.files || []);
if (files.length) {
// Launch the Mobile Web Capture instance with an initial file
- if (mobileWebCapture.hasLaunched)
+ if (mobileWebCapture.hasLaunched)
await mobileWebCapture.dispose();
await mobileWebCapture.launch(files[0]);
}
@@ -151,7 +151,7 @@ document.getElementById("initialFile").onchange = async function () {
const files = Array.from(this.files || []);
if (files.length) {
// Launch the Mobile Web Capture instance with an initial file
- if (mobileWebCapture.hasLaunched)
+ if (mobileWebCapture.hasLaunched)
await mobileWebCapture.dispose();
await mobileWebCapture.launch(files[0]);
}
@@ -203,7 +203,7 @@ interface MobileWebCaptureConfig {
##### See Also
-- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig)
+- [`DocumentScannerConfig`]({{ site.api }}index.html#documentscannerconfig)
#### Example
@@ -452,7 +452,7 @@ A simplified configuration type for toolbar buttons.
export type ToolbarButtonConfig = Pick<"icon" | "label" | "isHidden">;
```
-#### Properties
+#### Properties
| Property | Type | Description |
| ---------- | -------------------- | ----------------------------------- |
@@ -577,7 +577,7 @@ interface DDVAnnotationToolbarLabelConfig {
}
```
-## Assisting Interfaces
+## Assisting Interfaces
### `ExportConfig`
@@ -592,7 +592,7 @@ Uploads a document to the server. The function receives the document's file name
> [!IMPORTANT]
> Returning `{ status: "success" }` in this function is required to trigger [`onUploadSuccess`](#onuploadsuccess)
-###### **Type**
+###### **Type**
```typescript
(fileName: string, blob: Blob) => Promise
```
@@ -601,7 +601,7 @@ Uploads a document to the server. The function receives the document's file name
Downloads a document from the server. The function receives an `UploadedDocument` object and returns a `Promise` that resolves once the download is complete.
-###### **Type**
+###### **Type**
```typescript
(doc: UploadedDocument) => Promise
```
@@ -610,7 +610,7 @@ Downloads a document from the server. The function receives an `UploadedDocument
Deletes a document from the server. The function receives an `UploadedDocument` object and returns a `Promise` that resolves once the deletion is successful.
-###### **Type**
+###### **Type**
```typescript
(doc: UploadedDocument) => Promise
```
@@ -622,7 +622,7 @@ Called after a successful upload. It receives the file name, file type, the curr
> [!IMPORTANT]
> Returning `{ status: "success" }` in [`uploadToServer`](#uploadtoserver) is required to trigger this function.
-###### **Type**
+###### **Type**
```typescript
(fileName: string, fileType: string, view: EnumMWCViews, blob: Blob) => Promise
```
@@ -754,4 +754,4 @@ Use with [`MobileWebCaptureConfig`](#mobilewebcaptureconfig) to set which View t
```typescript
type EnumMWCStartingViews = EnumMWCViews.Library | EnumMWCViews.Document | EnumMWCViews.Scanner
-```
\ No newline at end of file
+```
diff --git a/guides/mobile-web-capture-customization.md b/code-gallery/mobile-web-capture/customization-guide.md
similarity index 97%
rename from guides/mobile-web-capture-customization.md
rename to code-gallery/mobile-web-capture/customization-guide.md
index 7426124..ef9f141 100644
--- a/guides/mobile-web-capture-customization.md
+++ b/code-gallery/mobile-web-capture/customization-guide.md
@@ -3,15 +3,15 @@ layout: default-layout
needAutoGenerateSidebar: true
needGenerateH3Content: true
noTitleIndex: false
-title: Mobile Web Capture - Scan Multi-Page Documents
-keywords: Documentation, Mobile Web Capture, Dynamsoft Document Scanner,
-description: Mobile Web Capture User Guide
+title: Mobile Document Scanner JS Edition - Scan Multi-Page Documents
+keywords: Documentation, Mobile Document Scanner, Web, JS Edition, Mobile Web Capture, Dynamsoft Document Scanner,
+description: Mobile Document Scanner JS Edition User Guide
---
# How to Customize Mobile Web Capture
> [!TIP]
-> Prerequisites: read the [MWC Getting Started Guide]({{ site.guides }}mobile-web-capture.html) before proceeding.
+> Prerequisites: read the [MWC Getting Started Guide]({{ site.guide }}mobile-web-capture/index.html) before proceeding.
This guide expands on the **Hello World** sample from the **MWC Getting Started Guide** and explores the available customization options.
@@ -51,7 +51,7 @@ Keep TOC only for npm /github as readme
4. `onUploadSuccess`: Specifies a function that is triggered when the upload operation succeeds.
4. `showLibraryView`: Configures where or not this **MWC** instance starts with the `LibraryView`.
5. `onClose`: Specifies a function that is triggered when the user closes this **MWC** instance.
-6. `documentScannerConfig`: Configures the behavior of the built-in `DocumentScanner` instance. See the details in [`DocumentScannerConfig`]({{ site.guides }}document-scanner.html#documentscannerconfig-overview).
+6. `documentScannerConfig`: Configures the behavior of the built-in `DocumentScanner` instance. See the details in [`DocumentScannerConfig`]({{ site.guide }}document-scanner.html#documentscannerconfig-overview).
7. `libraryViewConfig`: Configures the library view with the following properties:
1. `emptyContentConfig`: Specifies the content displayed in the library view when it is empty (no document).
2. `toolbarButtonsConfig`: Configures the buttons in the toolbar of the library view.
@@ -68,7 +68,7 @@ Keep TOC only for npm /github as readme
2. `toolbarButtonsConfig`: Configures the button in the toolbar of the history view.
12. `ddvResourcePath`: Paths to extra resources such as `.wasm` engine files and CSS files.
-API Reference: [`MobileWebCaptureConfig`]({{ site.api }}mobile-web-capture.html#mobilewebcaptureconfig)
+API Reference: [`MobileWebCaptureConfig`]({{ site.code-gallery }}}mobile-web-capture/api.html#mobilewebcaptureconfig)
## Overall UI and Workflow Customization
@@ -146,7 +146,7 @@ document.getElementById("initialFile").onchange = async function () {
```
API Reference:
-- [`hasLaunched`]({{ site.api }}mobile-web-capture.html#haslaunched)
+- [`hasLaunched`]({{ site.code-gallery }}}mobile-web-capture/.html#haslaunched)
- [`dispose`]({{ site.api }}mobile-web-capture.html#dispose)
### Scan Directly to Document
@@ -541,14 +541,14 @@ Update the `scripts` section in `package.json` to automatically copy the librari
Once all dependencies are installed, build the project by running:
-```bash
+```shell
npm run build
```
### Serve the Project Locally
Start the local development server by running:
-```bash
+```shell
npm run serve
```
diff --git a/guides/mobile-web-capture.md b/code-gallery/mobile-web-capture/index.md
similarity index 87%
rename from guides/mobile-web-capture.md
rename to code-gallery/mobile-web-capture/index.md
index f85f526..1187174 100644
--- a/guides/mobile-web-capture.md
+++ b/code-gallery/mobile-web-capture/index.md
@@ -3,17 +3,17 @@ layout: default-layout
needAutoGenerateSidebar: true
needGenerateH3Content: true
noTitleIndex: false
-title: Mobile Web Capture - Scan Multi-Page Documents
-keywords: Documentation, Mobile Web Capture, Dynamsoft Document Scanner,
-description: Mobile Web Capture User Guide
+title: Mobile Document Scanner JS Edition - Scan Multi-Page Documents
+keywords: Documentation, Mobile Document Scanner, Web, JS Edition, Mobile Web Capture, Dynamsoft Document Scanner,
+description: Mobile Document Scanner JS Edition User Guide
---
-# Scan Multi-Page Documents with Mobile Web Capture
+# Extend Mobile Document Scanner to Full Document Management
> [!TIP]
> Prerequisites: read the [Introduction]({{ site.introduction }}index.html) before proceeding.
-**Mobile Web Capture (MWC)** is an SDK designed for scanning multi-page documents. It integrates **Dynamsoft Document Scanner (DDS)** functionality while offering additional features such as multi-document management, annotation, and uploading, making it a comprehensive solution for managing complex document workflows.
+**Mobile Web Capture (MWC)** is an advanced sample designed to extend the features of MDS for managing and scanning multi-page documents. It integrates **Mobile Document Scanner (MDS)** functionality while offering additional features such as multi-document management, annotation, and uploading, making it a comprehensive solution for managing complex document workflows.
> [!TIP]
> See it in action with the [Mobile Web Capture Demo](https://demo.dynamsoft.com/mobile-web-capture/).
@@ -21,7 +21,7 @@ description: Mobile Web Capture User Guide
This guide walks you through building a web application that scans multi-page documents using **MWC**, with **pre-defined configurations**.
> [!TIP]
-> If you are looking for a solution that scans single-page documents, please read [Dynamsoft Document Scanner User Guide]({{ site.guides }}document-scanner.html) instead.
+> If you are looking for a solution that scans single-page documents, please read [Mobile Document Scanner User Guide]({{ site.guide }}index.html) instead.
## License
### Get a Trial License
-If you haven't got a trial license for **DDS**, you can request one here:
+If you do not have a trial license for **MDS**, you can request one here:
{% include trialLicense.html %}
- The trial license can be renewed twice, offering a total of two months of free access.
-
-> [!IMPORTANT]
-> **DDS** and **MWC** share the same license keys. If you already have a **DDS** license, you can use it for **MWC**, and vice versa.
+The trial license can be renewed twice for a total of two months of free access.
### Get a Full License
-To purchase a full license, [contact us](https://www.dynamsoft.com/company/contact/).
+[Contact us](https://www.dynamsoft.com/company/contact/) to purchase a full license.
## Quick Start
-The first step in using **DDS** is to obtain its library files. You can acquire them from one of the following sources:
+To use the **Mobile Document Scanner**, first obtain its library files. You can acquire them from one of the following sources:
-1. [**GitHub**](https://github.com/Dynamsoft/document-scanner-javascript) – Contains the source files for the **DDS** SDK, which can be compiled into library files.
+1. [**GitHub**](https://github.com/Dynamsoft/document-scanner-javascript) – Contains the source files for the **MDS** SDK, which can be compiled into library files.
2. [**npm**](https://www.npmjs.com/package/dynamsoft-document-scanner) – Provides precompiled library files via npm for easier installation.
3. [**CDN**](https://cdn.jsdelivr.net/npm/dynamsoft-document-scanner) – Delivers precompiled library files through a CDN for quick and seamless integration.
You can choose one of the following methods to set up a Hello World page:
-1. **Build from Source** – Download the source files from GitHub and compile the resource script yourself.
-2. **Using Precompiled Script** – Use the precompiled resource scripts from npm or the CDN for a quicker setup.
+1. **Build from source** – Download the source files from GitHub and compile the library files yourself.
+2. **Use precompiled scripts** – Use the precompiled resource scripts from npm or the CDN for a quicker setup.
+3. **Self-host resources** - Self-host both MDS and its dependencies on your web server.
+
+
-### Option 1: Build from Source
+
+
Build from Source
-This method retrieves all **DDS** source files from its [GitHub Repository](https://github.com/Dynamsoft/document-scanner-javascript), compiles them into a distributable package, and then runs a *ready-made* Hello World sample page included in the repository:
+### Build from Source
+
+This method retrieves all **MDS** source files from its [GitHub Repository](https://github.com/Dynamsoft/document-scanner-javascript), compiles them into a distributable package, and then runs a _ready-made_ Hello World sample page included in the repository:
+
+1. Download **MDS** from [GitHub](https://github.com/Dynamsoft/document-scanner-javascript) as a compressed folder.
-1. Download **DDS** from [GitHub](https://github.com/Dynamsoft/document-scanner-javascript) as a compressed folder.
2. Extract the contents of the archive, and open the extracted directory in a code editor.
+
3. Set your [license key](#get-a-trial-license) in the Hello World sample:
- 1. Open the Hello World sample at ([`/samples/hello-world.html`](https://github.com/Dynamsoft/document-scanner-javascript/blob/main/samples/hello-world.html)).
- 2. Search for `"YOUR_LICENSE_KEY_HERE"`, then replace it with your actual license key.
-4. Install project dependencies
- In the terminal, navigate to the project root directory and run:
- ```bash
+
+ 1. Open the Hello World sample at ([`/samples/hello-world.html`](https://github.com/Dynamsoft/document-scanner-javascript/blob/main/samples/hello-world.html)).
+
+ 2. Search for `"YOUR_LICENSE_KEY_HERE"`, then replace it with your actual license key.
+
+4. In the terminal, navigate to the project root directory and run the following to install project dependencies:
+
+ ```shell
npm install
```
-5. Build the project
- After installing dependencies, build the project by running:
- ```bash
+
+5. After installing dependencies, build the project by running:
+
+ ```shell
npm run build
```
-6. Serve the project locally
- Start the local server by running:
- ```bash
- npm run serve
+
+6. Start the local server by running the following to serve the project locally:
+
+ ```shell
+ npm run serve
```
-Once the server is running, open the application in a browser using the address provided in the terminal output after running `npm run serve`.
-> [!TIP]
-> See the server configuration details in [`/dev-server/index.js`](https://github.com/Dynamsoft/document-scanner-javascript/blob/main/dev-server/index.js).
+ Once the server is running, open the application in a browser using the address provided in the terminal output after running `npm run serve`.
+
+ > [!TIP]
+ > See the server configuration details in [`/dev-server/index.js`](https://github.com/Dynamsoft/document-scanner-javascript/blob/main/dev-server/index.js).
+
+
+
+
+
Use Precompiled Script
-### Option 2: Use Precompiled Script
+### Use Precompiled Script
-Since the **DDS** library files are published on [npm](https://www.npmjs.com/package/dynamsoft-document-scanner), it's easy to reference them from a CDN.
+We publish **MDS** library files on [npm](https://www.npmjs.com/package/dynamsoft-document-scanner) to make them simple to reference from a CDN.
To use the precompiled script, simply include the following URL in a `
```
@@ -111,10 +129,10 @@ To use the precompiled script, simply include the following URL in a `
-
Dynamsoft Document Scanner
+
Mobile Document Scanner
@@ -157,16 +176,138 @@ To run the sample, create a new file called `hello-world.html`, then copy and pa
If you are using VS Code, a quick and easy way to serve the project is using the [Live Server (Five Server) VSCode extension](https://marketplace.visualstudio.com/items?itemName=yandeu.five-server). Simply install the extension, open the `hello-world.html` file in the editor, and click "Go Live" in the bottom right corner of the editor. This will serve the application at `http://127.0.0.1:5500/hello-world.html`.
-Alternatively, you can use other methods like `IIS` or `Apache` to serve the project, though we won't cover those here for brevity.
+Alternatively, you can use other methods like `IIS` or `Apache` to serve the project, though we skip those here for brevity.
+
+
+
+
+
Self-Host Resources
+
+### Self-Host Resources
+
+By default, the MDS library (whether pre-compiled or self-compiled) fetches resource files (Dynamsoft `node` dependencies and an HTML UI template) from CDNs. Self-hosting library resources gives you full control over hosting your application. Rather than using CDNs to serve these resources, you can instead host these resources on your own servers to deliver to your users directly when they use your application.
+
+#### Download Resources
+
+First, download a copy of the resources:
+
+1. Download **MDS** from [GitHub](https://github.com/Dynamsoft/document-scanner-javascript) as a compressed folder.
+
+2. Extract the contents of the archive, and open the extracted directory in a code editor.
+
+3. Set your [license key](#get-a-trial-license) in the Hello World sample:
+
+ 1. Open the Hello World sample at ([`/samples/hello-world.html`](https://github.com/Dynamsoft/document-scanner-javascript/blob/main/samples/hello-world.html)).
+
+ 2. Search for `"YOUR_LICENSE_KEY_HERE"`, then replace it with your actual license key.
+
+4. In the terminal, navigate to the project root directory and run the following to install project dependencies:
+
+ ```shell
+ npm install
+ ```
+
+#### Point to Resources
+
+The library uses [`engineResourcePaths`]({{ site.api }}index.html#engineresourcepaths) to locate required Dynamsoft `node` dependencies by pointing to the location of the resources on your web server. The library also uses `scannerViewConfig.cameraEnhancerUIPath` similarly to set the path for the HTML UI template of the `ScannerView`. Later steps will place both the `node` dependencies and the HTML template in the local `dist` directory. Therefore, set `engineResourcePaths` in the MDS constructor to point to the local `dist` directory (along with setting your license key, and all other configurations):
+
+```javascript
+const documentScanner = new Dynamsoft.DocumentScanner({
+ license: "YOUR_LICENSE_KEY_HERE",
+ scannerViewConfig: {
+ cameraEnhancerUIPath: "./dist/document-scanner.ui.html", // Use the local file
+ },
+ engineResourcePaths: {
+ std: "./dist/libs/dynamsoft-capture-vision-std/dist/",
+ dip: "./dist/libs/dynamsoft-image-processing/dist/",
+ core: "./dist/libs/dynamsoft-core/dist/",
+ license: "./dist/libs/dynamsoft-license/dist/",
+ cvr: "./dist/libs/dynamsoft-capture-vision-router/dist/",
+ ddn: "./dist/libs/dynamsoft-document-normalizer/dist/",
+ },
+});
+```
+
+API Reference:
+
+- [`DocumentScanner()`]({{ site.api }}index.html#documentscanner)
+- [`DocumentScannerConfig`]({{ site.api }}index.html#documentscannerconfig)
+- [`DocumentScannerViewConfig`]({{ site.api }}index.html#documentscannerviewconfig)
+- [`engineResourcePaths`]({{ site.api }}index.html#engineresourcepaths)
+- [`cameraEnhancerUIPath`]({{ site.api }}index.html#cameraenhanceruipaths)
+
+#### Modify the Build Script
+
+Update the `scripts` section in `package.json` to automatically copy resources to the output `dist` directory during the build process.
+
+```json
+"scripts": {
+ "serve": "node dev-server/index.js",
+ "build": "rollup -c && npm run copy-libs",
+ "copy-libs": "npx mkdirp dist/libs && npx cpx \"node_modules/dynamsoft-*/**/*\" dist/libs/ --dereference",
+ "build:production": "rollup -c --environment BUILD:production"
+},
+```
+
+#### Build the Project
+
+Build the project by running:
+
+```shell
+npm run build
+```
+
+#### Serve the Project Locally
+
+Start the local development server by running:
+
+```shell
+npm run serve
+```
+
+Once the server is running, open the application in a browser using the address provided in the terminal output.
+
+#### Serve over HTTPS
+
+**Place the `dist` directory** onto your web server for to serve the web application. When deploying your web application for production, you must serve it over a **secure HTTPS connection**. We require this for the following reasons:
+
+1. **Browser Security Restrictions** – Most browsers only allow access to camera video streams in a secure context.
+
+ > [!NOTE]
+ > Some browsers like Chrome may grant access to camera video streams for `http://127.0.0.1`, `http://localhost`, or even pages opened directly from the local file system (`file:///...`). This can be helpful during development and testing.
+
+2. **Dynamsoft License Requirements** – A secure context is required for **Dynamsoft licenses** to function properly.
+
+#### Set MIME Type
+
+Certain legacy web application servers may lack support for the `application/wasm` mimetype for .wasm files. To address this, you have two options:
+
+1. Upgrade your web application server to one that supports the `application/wasm` mimetype.
+2. Manually define the mimetype on your server by setting the MIME type for `.wasm` as `application/wasm`. This allows the user's browser to correctly processes resource files. Different web servers have their own way of configuring the MIME type. Here are instructions for [Apache](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Apache_Configuration_htaccess#media_types_and_character_encodings), [IIS](https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap), and [NGINX](https://www.nginx.com/resources/wiki/start/topics/examples/full/#mime-types).
+
+#### Resource Caching
+
+The `wasm` resource files are relatively large and may take quite a few seconds to download. We recommend setting a longer cache time for these resource files to maximize the performance of your web application using the `Cache-Control` HTTP header. For example, use the `max-age` directive to cache resources for a specified time in seconds:
+
+```
+Cache-Control: max-age=31536000
+```
+
+Reference:
+[`Cache-Control`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control)
+
+
+
+
## Hello World Sample Explained
-Let’s walk through the code in the Hello World Sample to understand how it works.
+Here we walk through the code in the Hello World sample to explain how it works.
> [!TIP]
-> You can also view the full code by visiting the [Dynamsoft Document Scanner Hello World Sample on Github](https://github.com/Dynamsoft/document-scanner-javascript/blob/main/samples/hello-world.html).
+> You can also view the full code by visiting the [MDS JS Hello World Sample on Github](https://github.com/Dynamsoft/document-scanner-javascript/blob/main/samples/hello-world.html).
-### Reference DDS
+### Reference MDS
```html
@@ -174,15 +315,16 @@ Let’s walk through the code in the Hello World Sample to understand how it wor
- Dynamsoft Document Scanner - Hello World
+ Mobile Document Scanner - Hello World
+
```
-In this step, DDS is referenced using a relative local path in the `` section of the HTML.
+In this step, MDS is referenced using a relative local path in the `` section of the HTML.
```html
@@ -194,29 +336,29 @@ Alternatively, the script can be referenced from a CDN:
```
-**DDS** wraps all its dependency scripts, so a **DDS** project only needs to include **DDS** itself as a single script. No additional dependency scripts are required.
+**MDS** wraps all its dependency scripts, so a **MDS** project only needs to include **MDS** itself as a single script. No additional dependency scripts are required.
> [!WARNING]
-> Even if you reference the script locally, supporting resources like `.wasm` engine files are still loaded from the CDN at runtime. If you require a **fully offline setup**, follow the instructions in [Self-Hosting Resource File](#self-hosting-resource-files).
+> Even if you reference the script locally, supporting resources like `.wasm` engine files are still loaded from the CDN at runtime. If you require a **fully offline setup**, follow the instructions in [Self-Host Resources](#self-host-resources).
-### Instantiate DDS
+### Instantiate MDS
```javascript
const documentScanner = new Dynamsoft.DocumentScanner({
- license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
+ license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
});
```
API Reference:
-- [`DocumentScanner()`]({{ site.api }}document-scanner.html#documentscanner)
+- [`DocumentScanner()`]({{ site.api }}index.html#documentscanner)
-This step creates the **DDS** UI, which occupies the entire visible area of the browser window by default when launched. If needed, you can specify a container to restrict the UI's size. For more details, refer to [Confine DocumentScanner UI to a Specific Container](#example-1-confine-documentscanner-ui-to-a-specific-container).
+This step creates the **MDS** UI, which occupies the entire visible area of the browser window by default when launched. If needed, you can specify a container to restrict the UI's size. For more details, refer to [Confine DocumentScanner UI to a Specific Container](#example-1-confine-documentscanner-ui-to-a-specific-container).
> [!WARNING]
-> A license key is required for instantiation.
+> Instantiating the `DocumentScanner` requires a valid license key.
-### Launch DDS
+### Launch MDS
```javascript
const result = await documentScanner.launch();
@@ -224,13 +366,13 @@ const result = await documentScanner.launch();
API Reference:
-- [`launch()`]({{ site.api }}document-scanner.html#launch)
+- [`launch()`]({{ site.api }}index.html#launch)
This step launches the user into the document scanning workflow, beginning in the `DocumentScannerView`, where they can scan a document using one of three methods:
-* Option 1: Manually scan by pressing the **shutter button**.
-* Option 2: Enable "**Smart Capture**" - the scanner will automatically capture an image once a document is detected.
-* Option 3: Enable "**Auto Crop**" - the scanner will automatically capture an image, detect the document, and crop it out of the video frame.
+- Option 1: Manually scan by pressing the **shutter button**.
+- Option 2: Enable "**Smart Capture**" - the scanner will automatically capture an image once a document is detected.
+- Option 3: Enable "**Auto Crop**" - the scanner will automatically capture an image, detect the document, and crop it out of the video frame.
> [!TIP]
> For Options 1 & 2: The user is directed to `DocumentCorrectionView` to review detected document boundaries and make any necessary adjustments before applying corrections. Afterward, they proceed to `DocumentResultView`.
@@ -245,33 +387,34 @@ The workflow returns a scanned image object of type `CorrectedImageResult`. To d
```html
-
Dynamsoft Document Scanner
-
+
Mobile Document Scanner
+
+
```
API Reference:
-- [`DocumentResult`]({{ site.api }}document-scanner.html#documentresult)
+- [`DocumentResult`]({{ site.api }}index.html#documentresult)
The following code clears the result container and displays the scanned result as a canvas:
```javascript
if (result?.correctedImageResult) {
- resultContainer.innerHTML = "";
- const canvas = result.correctedImageResult.toCanvas();
- resultContainer.appendChild(canvas);
+ resultContainer.innerHTML = "";
+ const canvas = result.correctedImageResult.toCanvas();
+ resultContainer.appendChild(canvas);
} else {
- resultContainer.innerHTML = "
No image scanned. Please try again.
";
+ resultContainer.innerHTML = "
No image scanned. Please try again.
";
}
```
## Custom Usage
-This section builds on the Hello World sample to demonstrate how to configure **DDS**, typically by adjusting the `DocumentScannerConfig` object.
+This section builds on the Hello World sample to demonstrate how to configure **MDS**, typically by adjusting the `DocumentScannerConfig` object.
### `DocumentScannerConfig` Overview
-[`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig) is the primary configuration object for customizing **DDS**. It includes the following properties:
+[`DocumentScannerConfig`]({{ site.api }}index.html#documentscannerconfig) is the primary configuration object for customizing **MDS**. It includes the following properties:
1. `license`: The license key.
2. `container`: The HTML container for the entire workflow. If not specified (like in the Hello World Sample), one is created automatically.
@@ -299,17 +442,17 @@ This section builds on the Hello World sample to demonstrate how to configure **
9. `utilizedTemplateNames`: Template names for detection and correction. Typically not needed as the default template is used.
10. `engineResourcePaths`: Paths to extra resources such as `.wasm` engine files.
-We will discuss two main methods of customizing **DDS** with `DocumentScannerConfig`:
+We will discuss two main methods of customizing **MDS** with `DocumentScannerConfig`:
1. [**Workflow Customization**](#workflow-customization): Through container definitions.
2. [**View-Based Customization**](#view-based-customization): Through configuration objects.
-The customization examples below will build on the Hello World code from the [previous section](#option-2-use-precompiled-script). The only change required is adjusting the constructor argument.
+The customization examples below will build on the Hello World code from the [previous section](#use-precompiled-script). The only change required is adjusting the constructor argument.
```javascript
const documentScanner = new Dynamsoft.DocumentScanner({
- license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
- // Add more arguments
+ license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
+ // Add more arguments
});
```
@@ -319,17 +462,17 @@ In the Hello World sample, we use the complete workflow with minimum configurati
```javascript
const documentScanner = new Dynamsoft.DocumentScanner({
- license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
+ license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
});
// Launch the scanner and wait for the result
const result = await documentScanner.launch();
```
-In this case, **DDS** automatically creates "containers" for its **Views**. In this section, we'll discuss a few examples to adjust the **DDS** workflow.
+In this case, **MDS** automatically creates "containers" for its **Views**. In this section we discuss a few ways to adjust the **MDS** workflow.
#### Example 1: Confine DocumentScanner UI to a Specific Container
-As long as the `DocumentScanner` container is assigned, **DDS** will confine its **Views** within that container.
+As long as the `DocumentScanner` container is assigned, **MDS** confines its **Views** within that container.
> [!NOTE]
> Containers assigned to its constituent **Views** will be ignored.
@@ -340,18 +483,18 @@ As long as the `DocumentScanner` container is assigned, **DDS** will confine its
```javascript
const documentScanner = new Dynamsoft.DocumentScanner({
- license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
- container: document.getElementById("myDocumentScannerContainer") , // Use this container for the full workflow
- scannerViewConfig: {
- container: document.getElementById("myDocumentScannerViewContainer") // This container is ignored
- }
+ license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
+ container: document.getElementById("myDocumentScannerContainer"), // Use this container for the full workflow
+ scannerViewConfig: {
+ container: document.getElementById("myDocumentScannerViewContainer"), // This container is ignored
+ },
});
```
API Reference:
-- [`DocumentScanner()`]({{ site.api }}document-scanner.html#documentscanner)
-- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig)
+- [`DocumentScanner()`]({{ site.api }}index.html#documentscanner)
+- [`DocumentScannerConfig`]({{ site.api }}index.html#documentscannerconfig)
#### Example 2: Only Show `DocumentScannerView`
@@ -359,46 +502,52 @@ In some cases, `DocumentResultView` and `DocumentCorrectionView` may not be need
```javascript
const documentScanner = new Dynamsoft.DocumentScanner({
- license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
- showResultView: false,
- showCorrectionView: false
+ license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
+ showResultView: false,
+ showCorrectionView: false,
});
```
API Reference:
-- [`DocumentScanner()`]({{ site.api }}document-scanner.html#documentscanner)
-- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig)
+- [`DocumentScanner()`]({{ site.api }}index.html#documentscanner)
+- [`DocumentScannerConfig`]({{ site.api }}index.html#documentscannerconfig)
#### Example 3: Specify Individual View Containers
-If only the `DocumentScannerView`, `DocumentResultView`, and `DocumentCorrectionView` containers are provided without the `DocumentScanner` container, **DDS** will render the full workflow using these three containers.
+If only the `DocumentScannerView`, `DocumentResultView`, and `DocumentCorrectionView` containers are provided without the `DocumentScanner` container, **MDS** renders the full workflow using these three containers.
```html
-
-
+
+
```
```javascript
const documentScanner = new Dynamsoft.DocumentScanner({
- license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
- scannerViewConfig: {
- container: document.getElementById("myDocumentScannerViewContainer")
- },
- correctionViewConfig: {
- container: document.getElementById("myDocumentCorrectionViewContainer")
- },
- resultViewConfig: {
- container: document.getElementById("myScanResultViewContainer")
- }
+ license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
+ scannerViewConfig: {
+ container: document.getElementById("myDocumentScannerViewContainer"),
+ },
+ correctionViewConfig: {
+ container: document.getElementById("myDocumentCorrectionViewContainer"),
+ },
+ resultViewConfig: {
+ container: document.getElementById("myScanResultViewContainer"),
+ },
});
```
API Reference:
-- [`DocumentScanner()`]({{ site.api }}document-scanner.html#documentscanner)
-- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig)
+- [`DocumentScanner()`]({{ site.api }}index.html#documentscanner)
+- [`DocumentScannerConfig`]({{ site.api }}index.html#documentscannerconfig)
#### Example 4: Scan Static Image Directly
@@ -408,31 +557,31 @@ To scan an image file directly without opening the Scanner View at all, you can
```
-Then get the input file as a `File` object, and pass that file object to `launch()` DDS with:
+Then get the input file as a `File` object, and pass that file object to `launch()` MDS with:
```js
document.getElementById("initialFile").onchange = async function () {
-const files = Array.from(this.files || []);
-if (files.length) {
+ const files = Array.from(this.files || []);
+ if (files.length) {
const result = await documentScanner.launch(files[0]);
console.log(result);
// Clear the result container and display the scanned result as a canvas
if (result?.correctedImageResult) {
- resultContainer.innerHTML = ""; // Clear placeholder content
- const canvas = result.correctedImageResult.toCanvas();
- resultContainer.appendChild(canvas);
+ resultContainer.innerHTML = ""; // Clear placeholder content
+ const canvas = result.correctedImageResult.toCanvas();
+ resultContainer.appendChild(canvas);
} else {
- resultContainer.innerHTML = "
No image scanned. Please try again.
";
+ resultContainer.innerHTML = "
No image scanned. Please try again.
";
}
-}
+ }
};
```
This bypasses the Scanner View entirely and brings up the Correction View as the first View, after having detected document boundaries on the static image. The user can proceed through the rest of the workflow and further alter the document boundaries, re-take another image (to open up the Scanner View), etc.
> [!IMPORTANT]
-> `launch()` can accept images or PDFs. If launching with a PDF, DDS will **only process the first page**.
+> `launch()` can accept images or PDFs. If launching with a PDF, MDS will **only process the first page**.
#### Example 5: Configure Scan Modes
@@ -465,9 +614,9 @@ const documentScanner = new Dynamsoft.DocumentScanner({
API Reference:
-- [`DocumentScanner()`]({{ site.api }}document-scanner.html#documentscanner)
-- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig)
-- [`DocumentScannerViewConfig`]({{ site.api }}document-scanner.html#documentscannerviewconfig)
+- [`DocumentScanner()`]({{ site.api }}index.html#documentscanner)
+- [`DocumentScannerConfig`]({{ site.api }}index.html#documentscannerconfig)
+- [`DocumentScannerViewConfig`]({{ site.api }}index.html#documentscannerviewconfig)
### View-Based Customization
@@ -490,7 +639,7 @@ interface DocumentScannerViewConfig {
We previously covered `container` in [Workflow Customization](#workflow-customization), and changing `templateFilePath` is usually not required. Now, let's focus on `cameraEnhancerUIPath`.
> [!TIP]
-> If **DDS** performance does not meet your needs in your usage scenario, you may require a customized algorithm template for better results. In this case, please contact our experienced [Technical Support Team](https://www.dynamsoft.com/company/contact/) to discuss your requirements. They will help tailor a suitable template for you, which you can then apply by updating `templateFilePath`.
+> If **MDS** performance does not meet your needs in your usage scenario, you may require a customized algorithm template for better results. In this case, please contact our experienced [Technical Support Team](https://www.dynamsoft.com/company/contact/) to discuss your requirements. They will help tailor a suitable template for you, which you can then apply by updating `templateFilePath`.
By default, `cameraEnhancerUIPath` points to a file hosted on the jsDelivr CDN:
[https://cdn.jsdelivr.net/npm/dynamsoft-document-scanner@1.2/dist/document-scanner.ui.html](https://cdn.jsdelivr.net/npm/dynamsoft-document-scanner@1.2/dist/document-scanner.ui.html).
@@ -498,29 +647,33 @@ By default, `cameraEnhancerUIPath` points to a file hosted on the jsDelivr CDN:
This file defines the UI for `DocumentScannerView`. However, since files on the CDN **cannot be modified directly**, you need to use a **local version** to customize the UI. `cameraEnhancerUIPath` is used to specify the local version.
##### Steps to Customize the UI for `DocumentScannerView`
-1. Follow the instructions in [Build from Source](#option-1-build-from-source) to obtain the source files for **DDS**.
+
+1. Follow the instructions in [Build from Source](#build-from-source) to obtain the source files for **MDS**.
+
2. Edit `/src/document-scanner.ui.html` to apply your customizations.
+
3. Build the project to generate the updated file in `/dist/document-scanner.ui.html`:
- ```bash
- npm run build
- ```
+ ```shell
+ npm run build
+ ```
+
4. Update the configuration to use the local file instead of the CDN version:
- ```javascript
- const documentScanner = new Dynamsoft.DocumentScanner({
- license: "YOUR_LICENSE_KEY_HERE", // Replace with your actual license key
- scannerViewConfig: {
- cameraEnhancerUIPath: "../dist/document-scanner.ui.html", // Use the local file
- },
- });
- ```
+ ```javascript
+ const documentScanner = new Dynamsoft.DocumentScanner({
+ license: "YOUR_LICENSE_KEY_HERE", // Replace with your actual license key
+ scannerViewConfig: {
+ cameraEnhancerUIPath: "../dist/document-scanner.ui.html", // Use the local file
+ },
+ });
+ ```
API Reference:
-- [`DocumentScanner()`]({{ site.api }}document-scanner.html#documentscanner)
-- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig)
-- [`DocumentScannerViewConfig`]({{ site.api }}document-scanner.html#documentscannerviewconfig)
+- [`DocumentScanner()`]({{ site.api }}index.html#documentscanner)
+- [`DocumentScannerConfig`]({{ site.api }}index.html#documentscannerconfig)
+- [`DocumentScannerViewConfig`]({{ site.api }}index.html#documentscannerviewconfig)
##### Customizing the Scanning Region
@@ -542,7 +695,7 @@ interface ScanRegion {
API Reference:
-[`ScanRegion`]({{ site.api }}document-scanner.html#scanregion)
+[`ScanRegion`]({{ site.api }}index.html#scanregion)
Here is how the scanning region is set:
@@ -580,11 +733,11 @@ interface DocumentCorrectionViewConfig {
}
```
-`container` is covered in [Workflow Customization](#workflow-customization), we'll look at the other two properties below.
+`container` is covered in [Workflow Customization](#workflow-customization). Below we discuss the other two properties.
##### Styling Buttons
-The `toolbarButtonsConfig` property, of type `DocumentCorrectionViewToolbarButtonsConfig`, customizes the appearance and functionality of the UI buttons. Here is its definition:
+The `toolbarButtonsConfig` property of type `DocumentCorrectionViewToolbarButtonsConfig` customizes the appearance and functionality of the UI buttons. Here is its definition:
```javascript
type ToolbarButtonConfig = Pick;
@@ -595,52 +748,52 @@ interface DocumentCorrectionViewToolbarButtonsConfig {
}
```
-We can use it to change the icon and label of each of the three UI buttons individually or even hide them. Below is an example that sets a custom label and image icon for the "Detect Borders" button and hides the "fullImage" button:
+We can use it to change the icon and label of each of the three buttons individually or even hide the buttons. Below is an example that sets a custom label and image icon for the "Detect Borders" button and hides the "Full Image" button:
```javascript
const documentScanner = new Dynamsoft.DocumentScanner({
- license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
- correctionViewConfig: {
- toolbarButtonsConfig: {
- fullImage: {
- isHidden: true
- },
- detectBorders: {
- icon: "path/to/new_icon.png", // Change to the actual path of the new icon
- label: "Custom Label"
- }
- }
- }
+ license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
+ correctionViewConfig: {
+ toolbarButtonsConfig: {
+ fullImage: {
+ isHidden: true,
+ },
+ detectBorders: {
+ icon: "path/to/new_icon.png", // Change to the actual path of the new icon
+ label: "Custom Label",
+ },
+ },
+ },
});
```
API Reference:
-- [`DocumentScanner()`]({{ site.api }}document-scanner.html#documentscanner)
-- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig)
-- [`DocumentCorrectionViewConfig`]({{ site.api }}document-scanner.html#documentcorrectionviewconfig)
+- [`DocumentScanner()`]({{ site.api }}index.html#documentscanner)
+- [`DocumentScannerConfig`]({{ site.api }}index.html#documentscannerconfig)
+- [`DocumentCorrectionViewConfig`]({{ site.api }}index.html#documentcorrectionviewconfig)
##### Customizing Apply Button Callback
-The `onFinish` callback is triggered after the user's corrections have been applied. For example, the code below displays the corrected image in a `resultContainer` after the user clicks "Apply":
+The `onFinish` callback triggers after the user's corrections have been applied. For example, the code below displays the corrected image in a `resultContainer` after the user clicks "Apply":
```javascript
const documentScanner = new Dynamsoft.DocumentScanner({
- license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
- correctionViewConfig: {
- onFinish: (result) => {
- const canvas = result.correctedImageResult.toCanvas();
- resultContainer.appendChild(canvas);
- }
- }
+ license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
+ correctionViewConfig: {
+ onFinish: (result) => {
+ const canvas = result.correctedImageResult.toCanvas();
+ resultContainer.appendChild(canvas);
+ },
+ },
});
```
API Reference:
-- [`DocumentScanner()`]({{ site.api }}document-scanner.html#documentscanner)
-- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig)
-- [`DocumentCorrectionViewConfig`]({{ site.api }}document-scanner.html#documentcorrectionviewconfig)
+- [`DocumentScanner()`]({{ site.api }}index.html#documentscanner)
+- [`DocumentScannerConfig`]({{ site.api }}index.html#documentscannerconfig)
+- [`DocumentCorrectionViewConfig`]({{ site.api }}index.html#documentcorrectionviewconfig)
#### `DocumentResultView` Configuration
@@ -672,174 +825,96 @@ interface interface DocumentResultViewToolbarButtonsConfig {
}
```
-We can use it to change the icon and label of each of the three UI buttons individually or even hide them.
+We can use it to change the icon and label of each of the three buttons individually or even hide them.
Below is an example that sets a custom label and image icon for the "retake" button and hides the "share" button:
```javascript
const documentScanner = new Dynamsoft.DocumentScanner({
- license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
- resultViewConfig: {
- toolbarButtonsConfig: {
- retake: {
- icon: "path/to/new_icon.png", // Change to the actual path of the new icon
- label: "Custom Label"
- },
- share: {
- isHidden: true
- }
- }
- }
+ license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
+ resultViewConfig: {
+ toolbarButtonsConfig: {
+ retake: {
+ icon: "path/to/new_icon.png", // Change to the actual path of the new icon
+ label: "Custom Label",
+ },
+ share: {
+ isHidden: true,
+ },
+ },
+ },
});
```
API Reference:
-- [`DocumentScanner()`]({{ site.api }}document-scanner.html#documentscanner)
-- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig)
-- [`DocumentResultViewConfig`]({{ site.api }}document-scanner.html#documentresultviewconfig)
+- [`DocumentScanner()`]({{ site.api }}index.html#documentscanner)
+- [`DocumentScannerConfig`]({{ site.api }}index.html#documentscannerconfig)
+- [`DocumentResultViewConfig`]({{ site.api }}index.html#documentresultviewconfig)
##### Customizing the "Done" Button Callback
-The `onDone` callback is triggered when the "Done" button is pressed. For example, the code below displays the result image in a `resultContainer` after the user clicks "Done":
+The `onDone` callback triggers when the "Done" button is pressed. For example, the code below displays the result image in a `resultContainer` after the user clicks "Done":
```javascript
const documentScanner = new Dynamsoft.DocumentScanner({
- license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
- resultViewConfig: {
- onDone: async (result) =>
- {
- const canvas = result.correctedImageResult.toCanvas();
- resultContainer.appendChild(canvas);
- }
- }
+ license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
+ resultViewConfig: {
+ onDone: async (result) => {
+ const canvas = result.correctedImageResult.toCanvas();
+ resultContainer.appendChild(canvas);
+ },
+ },
});
```
API Reference:
-- [`DocumentScanner()`]({{ site.api }}document-scanner.html#documentscanner)
-- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig)
-- [`DocumentResultViewConfig`]({{ site.api }}document-scanner.html#documentresultviewconfig)
+- [`DocumentScanner()`]({{ site.api }}index.html#documentscanner)
+- [`DocumentScannerConfig`]({{ site.api }}index.html#documentscannerconfig)
+- [`DocumentResultViewConfig`]({{ site.api }}index.html#documentresultviewconfig)
##### Customizing the "Upload" Button
-The `onUpload` callback is triggered when the "Upload" button is pressed. Note that the Upload button _only appears_ if a callback function is defined for `onUpload`; otherwise, the button remains hidden.
+The `onUpload` callback triggers when the "Upload" button is pressed. Note that the Upload button _only appears_ if a callback function is defined for `onUpload`; the button remains hidden otherwise.
The following example demonstrates how to upload the result image to a server:
> [!TIP]
-> If you followed the steps in [Build from Source](#option-1-build-from-source) and are still using the predefined Express server setup, the following upload code will work correctly. The image will be uploaded directly to the dev server as "uploadedFile.png". See the server configuration details in [`/dev-server/index.js`](https://github.com/Dynamsoft/document-scanner-javascript/blob/main/dev-server/index.js).
+> If you followed the steps in [Build from Source](#build-from-source) and are still using the predefined Express server setup, the following upload code will work correctly. The image will be uploaded directly to the dev server as "uploadedFile.png". See the server configuration details in [`/dev-server/index.js`](https://github.com/Dynamsoft/document-scanner-javascript/blob/main/dev-server/index.js).
```javascript
const documentScanner = new Dynamsoft.DocumentScanner({
- license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
- resultViewConfig: {
- onUpload: async (result) => {
- const host = window.location.origin;
- const blob = await result.correctedImageResult.toBlob();
- // Create form data
- const formData = new FormData();
- formData.append("uploadFile", blob, "uploadedFile.png");
- // Upload file
- const response = await fetch(
- `${host}/upload`, // Change this to your actual upload URL
- {
- method: "POST",
- body: formData,
- }
- );
+ license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key
+ resultViewConfig: {
+ onUpload: async (result) => {
+ const host = window.location.origin;
+ const blob = await result.correctedImageResult.toBlob();
+ // Create form data
+ const formData = new FormData();
+ formData.append("uploadFile", blob, "uploadedFile.png");
+ // Upload file
+ const response = await fetch(
+ `${host}/upload`, // Change this to your actual upload URL
+ {
+ method: "POST",
+ body: formData,
},
+ );
},
+ },
});
```
API Reference:
-- [`DocumentScanner()`]({{ site.api }}document-scanner.html#documentscanner)
-- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig)
-- [`DocumentResultViewConfig`]({{ site.api }}document-scanner.html#documentresultviewconfig)
-
-### Self-Hosting Resource Files
-
-By default, **DDS** relies on a CDN for resources such as `.wasm` engine files. If you require a **fully offline setup**, follow these steps:
-> [!TIP]
-> These steps are based on [Build from Source](#option-1-build-from-source), meaning that all **DDS** source files must be available on your local machine.
-
-#### Update the Engine Resource Paths and the UI Path:
-
-> [!TIP]
-> In this case, we reference local resource files that are copied during the build process. See [Modify the Build Script](#modify-the-build-script) for details. However, you can also reference your own copies, such as files hosted on your own server. If you need assistance, feel free to [contact us](https://www.dynamsoft.com/company/contact/).
-
-```javascript
-const documentScanner = new Dynamsoft.DocumentScanner({
- license: "YOUR_LICENSE_KEY_HERE",
- scannerViewConfig: {
- cameraEnhancerUIPath: "./dist/document-scanner.ui.html", // Use the local file
- },
- engineResourcePaths: {
- std: "./dist/libs/dynamsoft-capture-vision-std/dist/",
- dip: "./dist/libs/dynamsoft-image-processing/dist/",
- core: "./dist/libs/dynamsoft-core/dist/",
- license: "./dist/libs/dynamsoft-license/dist/",
- cvr: "./dist/libs/dynamsoft-capture-vision-router/dist/",
- ddn: "./dist/libs/dynamsoft-document-normalizer/dist/",
- },
-});
-```
-
-API Reference:
-
-- [`DocumentScanner()`]({{ site.api }}document-scanner.html#documentscanner)
-- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig)
-- [`DocumentScannerViewConfig`]({{ site.api }}document-scanner.html#documentscannerviewconfig)
-
-#### Modify the Build Script
-
-Update the `scripts` section in `package.json` to automatically copy the libraries during the build process:
-
-```json
-"scripts": {
- "serve": "node dev-server/index.js",
- "build": "rollup -c && npm run copy-libs",
- "copy-libs": "npx mkdirp dist/libs && npx cpx \"node_modules/dynamsoft-*/**/*\" dist/libs/ --dereference",
- "build:production": "rollup -c --environment BUILD:production"
-},
-```
-
-#### Build the Project
-
-Build the project by running:
-
-```bash
-npm run build
-```
-
-#### Serve the Project Locally
-
-Start the local development server by running:
-```bash
-npm run serve
-```
-
-Once the server is running, open the application in a browser using the address provided in the terminal output.
-
-Now, all required files will be **served locally** without relying on a CDN.
-
->[!IMPORTANT]
->* Certain legacy web application servers may lack support for the `application/wasm` mimetype for .wasm files. To address this, you have two options:
-> 1. Upgrade your web application server to one that supports the `application/wasm` mimetype.
-> 2. Manually define the mimetype on your server. You can refer to the guides for [apache](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Apache_Configuration_htaccess#media_types_and_character_encodings) / [IIS](https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap) / [nginx](https://www.nginx.com/resources/wiki/start/topics/examples/full/#mime-types).
->
->* To work properly, the SDK requires a few engine files, which are relatively large and may take quite a few seconds to download. We recommend that you set a longer cache time for these engine files, to maximize the performance of your web application.
->
-> ```
-> Cache-Control: max-age=31536000
-> ```
->
-> Reference: [Cache-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control).
+- [`DocumentScanner()`]({{ site.api }}index.html#documentscanner)
+- [`DocumentScannerConfig`]({{ site.api }}index.html#documentscannerconfig)
+- [`DocumentResultViewConfig`]({{ site.api }}index.html#documentresultviewconfig)
## Next Step
-**DDS** is a fully functional, ready-to-use document scanning SDK with built-in UI layouts. However, to extend its capabilities for multi-page and multi-document processing, as well as advanced editing features, we developed **Mobile Web Capture (MWC)**.
+**MDS** is a fully functional, ready-to-use **single page** scanning SDK with built-in UI layouts. There are two options which extend the features of MDS:
+
+1. To scan multi-page documents as PDFs, please contact [Dynamsoft Support](https://www.dynamsoft.com/company/contact/) for further information.
-Read on to learn how to use this web-based wrapper SDK in the [MWC Getting Started Guide]({{ site.guides }}mobile-web-capture.html).
+2. For multi-page and multi-document processing, as well as advanced editing features, we developed **Mobile Web Capture (MWC)**. Read on to learn how to use this web-based wrapper SDK in the [**Mobile Web Capture User Guide**]({{ site.code-gallery }}mobile-web-capture/index.html).
diff --git a/guides/mobile-web-capture-customization-v3.0.md b/guide/mobile-web-capture-customization-v3.0.md
similarity index 99%
rename from guides/mobile-web-capture-customization-v3.0.md
rename to guide/mobile-web-capture-customization-v3.0.md
index f6c22ad..d3d1d2b 100644
--- a/guides/mobile-web-capture-customization-v3.0.md
+++ b/guide/mobile-web-capture-customization-v3.0.md
@@ -528,14 +528,14 @@ Update the `scripts` section in `package.json` to automatically copy the librari
Once all dependencies are installed, build the project by running:
-```bash
+```shell
npm run build
```
### Serve the Project Locally
Start the local development server by running:
-```bash
+```shell
npm run serve
```
diff --git a/guides/mobile-web-capture-v3.0.md b/guide/mobile-web-capture-v3.0.md
similarity index 99%
rename from guides/mobile-web-capture-v3.0.md
rename to guide/mobile-web-capture-v3.0.md
index 7369fa7..23e6a22 100644
--- a/guides/mobile-web-capture-v3.0.md
+++ b/guide/mobile-web-capture-v3.0.md
@@ -75,17 +75,17 @@ Follow these steps:
> In your code editor, open the Hello World sample located at [`/samples/hello-world.html`](https://github.com/Dynamsoft/mobile-web-capture/blob/main/samples/hello-world.html). Search for `"YOUR_LICENSE_KEY_HERE"` and replace it with your actual license key.
4. Install project dependencies
In the terminal, navigate to the project root directory and run:
- ```bash
+ ```shell
npm install
```
5. Build the project
After the dependencies are installed, build the project by running:
- ```bash
+ ```shell
npm run build
```
6. Serve the project locally
Start the local server by running:
- ```bash
+ ```shell
npm run serve
```
Once the server is running, open the application in a browser using the address provided in the terminal output after running `npm run serve`.
diff --git a/guides/index.md b/guides/index.md
deleted file mode 100644
index 3e2f7f7..0000000
--- a/guides/index.md
+++ /dev/null
@@ -1,19 +0,0 @@
----
-layout: default-layout
-needAutoGenerateSidebar: true
-needGenerateH3Content: true
-noTitleIndex: true
-title: Mobile Web Capture - User Guide Index
-keywords: Documentation, Mobile Web Capture, Dynamsoft Document Scanner, User Guide Index
-description: Mobile Web Capture User Guide Index
----
-
-# Mobile Web Capture User Guide Index
-
-Since **MWC** is built on **DDS** and shares its core functionality, we recommend first reading the following guide to understand single-page capturing powered by **DDS**:
-
-- [DDS Developer Guide]({{ site.guides }}document-scanner.html)
-
-Once you're familiar with DDS, proceed to the following guide on **MWC** to explore additional features for multi-page document management, editing, and annotation:
-
-- [MWC Developer Guide]({{ site.guides }}mobile-web-capture.html)
diff --git a/index.md b/index.md
index 2df89c3..c74ba86 100644
--- a/index.md
+++ b/index.md
@@ -1,20 +1,18 @@
---
layout: home-page
-title: Mobile Web Capture Documentation
-keywords: Mobile Web Capture, documentation
-description: Mobile Web Capture Documentation Homepage
+title: Mobile Document Scanner JS Edition Documentation
+keywords: Mobile Document Scanner, Web, JS Edition, documentation
+description: Mobile Document Scanner JS Edition Documentation Homepage
---
-# Mobile Web Capture
+# Mobile Document Scanner JavaScript Edition
- [Introduction]({{ site.introduction }}index.html)
-- [Developer Guides]({{ site.guides }}index.html)
- - [Scan Single-Page Documents]({{ site.guides }}document-scanner.html)
- - [Scan Multi-Page Documents]({{ site.guides }}mobile-web-capture.html)
- - [Customize UI And Workflow]({{ site.guides }}mobile-web-capture-customization.html)
+- [Developer Guide]({{ site.guide }}index.html)
- Code Gallery
- [Frameworks]({{ site.code-gallery }}frameworks.html)
-- [API References]({{ site.api }}index.html)
- - [Document Scanner]({{ site.api }}document-scanner.html)
- - [Mobile Web Capture]({{ site.api }}mobile-web-capture.html)
-- [Release notes]({{ site.release-notes }}mobile-web-capture.html)
+ - [Mobile Web Capture](({{ site.code-gallery }}mobile-web-capture/index.html))
+ - [Customization Guide]({{ site.code-gallery }}mobile-web-capture/customization-guide.html)
+ - [API Reference]({{ site.code-gallery }}mobile-web-capture/api.html)
+- [API Reference]({{ site.api }}index.html)
+- [Release notes]({{ site.release-notes }}index.html)
diff --git a/introduction/index-v3.0.md b/introduction/index-v3.0.md
index c92a2ed..b8a0888 100644
--- a/introduction/index-v3.0.md
+++ b/introduction/index-v3.0.md
@@ -12,7 +12,7 @@ permalink: /introduction/index.html
# Introduction
-When digitizing physical documents—whether for easier storage, better accessibility, or streamlined processing — a hardware scanner is often the preferred choice. For integrating this functionality into web applications, **Dynamsoft’s** [Dynamic Web TWAIN](https://www.dynamsoft.com/web-twain/docs/introduction/index.html) is a widely popular option.
+When digitizing physical documents - whether for easier storage, better accessibility, or streamlined processing - a hardware scanner is often the preferred choice. For integrating this functionality into web applications, **Dynamsoft’s** [Dynamic Web TWAIN](https://www.dynamsoft.com/web-twain/docs/introduction/index.html) is a widely popular option.
However, when hardware scanners are not feasible or convenient, mobile device cameras can serve as effective alternatives. **Mobile Web Capture (MWC)** is a document scanning SDK specifically designed to address this need.
@@ -24,7 +24,7 @@ However, when hardware scanners are not feasible or convenient, mobile device ca
## Choosing the Right Solution
-**MWC** is designed to handle all three scenarios seamlessly. However, for **single-page document capture (Scenario 1)**, **MWC** may feel overly feature-rich. To address this, we developed **Dynamsoft Document Scanner (DDS)** — a streamlined solution tailored for capturing single-page documents using mobile cameras.
+**MWC** is designed to handle all three scenarios seamlessly. However, for **single-page document capture (Scenario 1)**, **MWC** may feel overly feature-rich. To address this, we developed **Dynamsoft Document Scanner (DDS)** - a streamlined solution tailored for capturing single-page documents using mobile cameras.
**DDS** not only captures documents but also enhances their quality to meet professional standards, making it an ideal tool for **Scenario 1** as described above.
diff --git a/introduction/index.md b/introduction/index.md
index 3ae7693..d6ddef1 100644
--- a/introduction/index.md
+++ b/introduction/index.md
@@ -3,147 +3,58 @@ layout: default-layout
needAutoGenerateSidebar: true
needGenerateH3Content: true
noTitleIndex: false
-title: Mobile Web Capture - Introduction
-keywords: Documentation, Mobile Web Capture, Introduction
+title: Mobile Document Scanner JS Edition - Introduction
+keywords: Documentation, Mobile Document Scanner, Web, JS Edition, Introduction
breadcrumbText: Introduction
-description: Mobile Web Capture Documentation Introduction
-permalink: /introduction/index.html
+description: Mobile Document Scanner JS Edition Documentation Introduction
---
# Introduction
-When digitizing physical documents — whether for easier storage, better accessibility, or streamlined processing — a hardware scanner is often the preferred choice. For integrating this functionality into web applications, **Dynamsoft’s** [Dynamic Web TWAIN](https://www.dynamsoft.com/web-twain/docs/introduction/index.html) is a widely popular option.
-
-However, when hardware scanners are not feasible or convenient, mobile device cameras can serve as effective alternatives. **Mobile Web Capture (MWC)** is a document scanning SDK specifically designed to address this need.
-
-## Common Usage Scenarios
-
-1. **Document Capture** – Capture a *single* clear image of a physical document, such as a patient intake form or the biographical page of a passport.
-2. **Document Management** – Capture images of *multiple* document pages (e.g., a contract) and compile them into a single PDF.
-3. **Document Processing** – Add *annotations* to scanned pages and perform common editing tasks such as cropping and color filtering.
-
-## Choosing the Right Solution
-
-**MWC** is designed to handle all three scenarios seamlessly. However, for **single-page document capture (Scenario 1)**, **MWC** may feel overly feature-rich. To address this, we developed **Dynamsoft Document Scanner (DDS)** — a streamlined solution tailored for capturing single-page documents using mobile cameras.
-
-**DDS** not only captures documents but also enhances their quality to meet professional standards, making it an ideal tool for **Scenario 1** as described above.
+When digitizing physical documents - whether for easier storage, better accessibility, or streamlined processing - a hardware scanner is often the preferred choice. However, when hardware scanners are not feasible or convenient, mobile device cameras can serve as effective alternatives. To address this need, Dynamsoft created the **Mobile Document Scanner JavaScript Edition (MDS) SDK**.
> [!TIP]
-> Not sure if it is the right fit? **Try the** [DDS demo](https://demo.dynamsoft.com/document-scanner/) first. If it meets your needs, you can skip the rest of this introduction and proceed directly to the [DDS user guide]({{ site.guides }}document-scanner.html).
-
-However, if you need multi-page capture, **MWC** extends DDS’s functionality by supporting multi-page documents. Additionally, **MWC** offers advanced features such as document processing, editing, and annotation, making it a comprehensive solution for managing complex document workflows.
-
-In short, for scenarios requiring **document management beyond single-page capture, MWC provides the flexibility and functionality needed to streamline the entire process.**
-
-## Key Features
+> If you are integrating **hardware scanners** into web applications, you may be interested in **Dynamsoft’s** [**Dynamic Web TWAIN**](https://www.dynamsoft.com/web-twain/docs/introduction/index.html) solution.
-| Feature | DDS | MWC |
-| :-------------------------------------------------------------------------------------------------- | :--- | :--- |
-| Capture single documents using mobile devices or webcams | ✓ | ✓ |
-| Import a single local image of a document | ✓ | ✓ |
-| Import multiple images or PDF files | | ✓ |
-| Automatically detect document borders during image capture | ✓ | ✓ |
-| Automatically capture and correct images to match detected document boundaries | ✓ | ✓ |
-| Organize and manage a multi-page document | | ✓ |
-| Organize and manage multiple documents in a library | | ✓ |
-| Annotate documents with comments, highlights, or other markings | | ✓ |
-| Easily transfer pages between documents | | ✓ |
-| Export a single-page document as an image | ✓ | ✓ |
-| Export multi-page documents as PDFs with options for selected pages, one or multiple full documents | | ✓ |
+## Common Usage Scenarios
-> [!NOTE]
-> To deliver these features, we built **DDS** using two core Dynamsoft products: [**Dynamsoft Camera Enhancer**](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/user-guide/index.html?lang=javascript) (DCE) and [**Dynamsoft Document Normalizer**](https://www.dynamsoft.com/document-normalizer/docs/web/programming/javascript/user-guide/index.html?lang=javascript) (DDN).
->
-> **MWC** extends this foundation by adding document management, processing, and editing features through [**Dynamsoft Document Viewer**](https://www.dynamsoft.com/document-viewer/docs/introduction/index.html) (DDV). Both products operate within the [**Dynamsoft Capture Vision**](https://www.dynamsoft.com/capture-vision/docs/core/architecture/?lang=javascript) (DCV) architecture.
+1. **Single Page Capture** – Capture a single, clear image of a physical document, such as an invoice or patient-intake form. This is the core functionality of MDS. You can try this feature in the [**MDS demo**](https://demo.dynamsoft.com/document-scanner/). If it meets your needs, feel free to go directly to the [**MDS user guide**]({{ site.guide }}index.html).
+2. **Document Management** – Capture images of multiple document pages (e.g., a contract) and compile them into a single PDF. Please contact [Dynamsoft Support](https://www.dynamsoft.com/company/contact/) if you need this feature.
+3. **Advanced Document Management** – Handle multi-page documents, **multiple documents**, PDF files, annotations, and more with the Mobile Web Capture advanced sample project. Check out the [**online demo**](https://demo.dynamsoft.com/mobile-web-capture/), or read the [**developer guide**]({{ site.code-gallery }}mobile-web-capture/index.html) to try it for yourself.
## Design Principles
-We designed **DDS** and **MWC** with three core principles in mind:
+We designed **MDS** with three core principles in mind:
1. **Minimal Code** - High-level APIs provide full functionality with just **a couple of lines of code**, significantly reducing development and maintenance costs.
2. **Ready-to-Use UI** - Pre-integrated components and a pre-designed UI enable a **quick setup** while minimizing design efforts.
3. **Effortless Customization** - Tailored configuration objects allow for **easy workflow customization**, addressing common document scenarios without adding development complexity.
-The following example demonstrates how simple it is to power a complete document scanning and management workflow, including all UI elements:
+The following example demonstrates how simple it is to power a complete document scanning workflow, including all UI elements:
```javascript
-const mobileWebCapture = new Dynamsoft.MobileWebCapture({
+const documentScanner = new Dynamsoft.DocumentScanner({
license: "YOUR_LICENSE_KEY_HERE",
});
-await mobileWebCapture.launch();
+await documentScanner.launch();
```
The UI elements are modularized into distinct Views, each offering developer-friendly configuration options. These options enable flexible business logic through straightforward configuration objects, helping to reduce development costs and streamline maintenance.
-The following section provides a high-level overview of the Views, followed by a detailed look at two specific Views.
+The following section provides a high-level overview of the Views.
## Views
-**DDS** and **MWC** workflows are composed of **Views**, each of which comes **ready-to-use** and can be easily customized using configuration objects.
-
-### DDS Views
-
-**DDS** includes the following Views for document scanning and correction:
+MDS workflows are composed of **Views**, each of which comes **ready-to-use** and can be easily customized using configuration objects. These include the following Views for document scanning and correction:
1. **Document Scanner View** – Captures documents using a camera scanner.
2. **Document Correction View** – Applies further perspective cropping and adjustments.
3. **Document Result View** – Provides a preview of the scanned document.
-### MWC Views
-
-Building on **DDS**, **MWC** extends functionality with additional Views for full document management, editing, and annotation capabilities:
-
-1. **Library View** – Manage all multi-page documents.
-2. **Document View** – Organize and manage all pages within a specific document.
-3. **Page View** – View and edit a single page in a document with features including "Cropy", "Rotate", "Filter", and "Annotate".
-4. **Transfer View** – Copy or move pages between documents.
-
-### Detailed View Breakdown
-
-Here is a closer look at two specific Views:
-
-#### Document Scanner View
+### Highlight: Document Scanner View
-The **Document Scanner View** (available in both **DDS** and **MWC**) captures scans of documents. It automatically detects document boundaries in the video feed and can optionally select the best frame for scanning, eliminating the need for users to manually snap the image.
-
-#### Page View
-
-
-
-The **Page View** (**MWC** only) allows users to view and edit an individual page of a document with a variety of tools. It supports common editing tasks such as cropping, color filtering, and comprehensive annotation options to enhance document clarity and presentation.
-
-
-
-
-
-
+The **Document Scanner View** captures scans of documents. It automatically detects document boundaries in the video feed and can optionally select the best frame for scanning, eliminating the need for users to manually snap the image.
## System Requirements
@@ -159,7 +70,7 @@ When deploying your web application for production, ensure it is served over a *
### Required Browser Features
-The following** browser features** are required for the **DCE** and **DDN** components of **DDS** and **MWC**:
+The following** browser features** are required for the **DCE** and **DDN** components of **MDS**:
1. [`WebAssembly`](https://caniuse.com/?search=WebAssembly)
2. [`Blob`](https://caniuse.com/?search=Blob)
@@ -179,6 +90,4 @@ The table below lists the **minimum supported versions** of browsers based on th
## Next Step
-- If you only need to scan single-page documents and do not require handling PDF files (import or export), you can proceed to the [Dynamsoft Document Scanner Developer Guide]({{ site.guides }}document-scanner.html).
-
-- If you need to handle multi-page documents, PDF files, annotations, and more, you will need the full-featured **Mobile Web Capture (MWC)**. In this case, proceed to the [Mobile Web Capture Developer Guide]({{ site.guides }}mobile-web-capture.html).
+Proceed to the [Mobile Document Scanner Developer Guide]({{ site.guide }}index.html) to build your own document scanning web application.
diff --git a/release-notes/document-scanner.md b/release-notes/document-scanner.md
deleted file mode 100644
index 2def145..0000000
--- a/release-notes/document-scanner.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-layout: default-layout
-needAutoGenerateSidebar: true
-needGenerateH3Content: true
-noTitleIndex: true
-title: Document Scanner - Release Notes
-keywords: Documentation, Mobile Web Capture, Document Scanner, DDS, MWC, Release Notes
-breadcrumbText: Release Notes
-description: Mobile Web Capture Documentation Release Notes
-permalink: /release-notes/document-scanner.html
----
-
-# Document Scanner Release Notes
diff --git a/release-notes/index.md b/release-notes/index.md
new file mode 100644
index 0000000..af69e41
--- /dev/null
+++ b/release-notes/index.md
@@ -0,0 +1,161 @@
+---
+layout: default-layout
+needAutoGenerateSidebar: true
+needGenerateH3Content: true
+noTitleIndex: true
+title: Document Scanner - Release Notes
+keywords: Documentation, Mobile Document Scanner, Web, JS Edition, Document Scanner, MDS, MWC, Release Notes
+breadcrumbText: Release Notes
+description: Mobile Web Capture Documentation Release Notes
+---
+
+# Mobile Document Scanner JavaScript Edition Release Notes
+
+## 1.2.0 (30/04/2025)
+
+# Release Notes
+
+### Features
+
+- `DocumentScanner` configuration options
+ - `ScannerViewConfig`
+ - `enableAutoCropMode?: boolean; // False by default`
+ - `enableSmartCaptureMode?: boolean; // False by default`
+ - `showSubfooter`: Toggle showing the sub-footer container that allows users to toggle scan modes (Detect border, Smart capture, Auto crop). `true` by default
+ - `showPoweredByDynamsoft`: Toggle showing `Powered by Dynamsoft` message on the scanner view. `true` by default
+ - `minVerifiedFramesForAutoCapture`: Change the minimum verified frames to auto capture the document. `2` frames are needed by default. Lower this number to make the capture faster (this could have an effect on accuracy/quality of image scanned).
+ - `scanRegion`: allows users to set a scan region while scanning a document
+
+```typescript
+export interface ScanRegion {
+ ratio: {
+ width: number;
+ height: number;
+ }; // Ratio of the scan region
+ regionBottomMargin: number; // Bottom margin calculated in pixel. This will "push" the scan region upwards
+ style: {
+ strokeWidth: number; // width of the scan region border
+ strokeColor: string; // color of the scan region border
+ };
+}
+```
+ - Added `Re-take` button in Correction View. this will allow users to retake/rescan the document through the correction view.
+ - Provide landscape support for the Document Scanner View (implemented in`document-scanner.ui.html`)
+ - Template optimization: Updated `scaleDownThreshold` to `1000`
+ - Allow `launch()` with a static image. A sample is provided under `sample/scenarios/use-file-input.html`
+ - Set the default resolution when opening camera to `2K` resolution
+
+### Fixes
+
+- Enable `OutputOriginalImage` on the template by default. Before, it required us to enable it manually if we use a custom template.
+- Set `engineResourcePaths` before `initLicense` to prevent a bug when a user implements a custom engineResourcePath.
+- Update trial license banner link to lead to `https://www.dynamsoft.com/customer/license/trialLicense?product=mwc&deploymenttype=web`
+
+### Dependencies
+
+- [Dynamsoft Capture Vision JavaScript 2.6.1000](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/release-notes/dcvb.html#261000-01032025)
+ - Dynamsoft Camera Enhancer 4.1.1
+ - Dynamsoft Document Normalizer 2.6.11
+
+
+## 1.1.1 (07/02/2025)
+
+### Fixes
+
+- Fixed icon not showing up on Firefox mobile
+
+### Dependencies
+
+- [Dynamsoft Capture Vision JavaScript 2.6.1000](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/release-notes/dcvb.html#261000-01032025)
+ - Dynamsoft Camera Enhancer 4.1.1
+ - Dynamsoft Document Normalizer 2.6.11
+
+## 1.1.0 (07/02/2025)
+
+### Features
+
+- `DocumentScanner` configuration options
+ - View Control
+ - `showCorrectionView`: Toggle correction view visibility and workflow
+ - `showResultView`: Togle result view visibility and workflow
+ - UI Changes
+ - Hidden `DocumentCorrectionView` -> `Smart Capture` button hidden on `DocumentScannerView`
+ - Hidden `DocumentResultView` -> `Apply` changes to `Done` in `DocumentCorrectionView`
+ - Resource Configuration
+ - `engineResourcePaths`: to configure DCV engine resources
+ - `templateFilePath`: set template file location
+- Added `EnumDDSViews` enum (Scanner/Result/Correction)
+
+### Fixes
+
+- Fixed button state issues with hidden views
+- Fixed `container` type flexibility in `DocumentScannerViewConfig`
+
+### Dependencies
+
+- [Dynamsoft Capture Vision JavaScript 2.6.1000](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/release-notes/dcvb.html#261000-01032025)
+ - Dynamsoft Camera Enhancer 4.1.1
+ - Dynamsoft Document Normalizer 2.6.11
+
+## 1.0.3 (07/02/2025)
+
+### Fixes
+
+- Fixed missing devDependency in `package.json`.
+
+### Dependencies
+
+- [Dynamsoft Capture Vision JavaScript 2.6.1000](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/release-notes/dcvb.html#261000-01032025)
+ - Dynamsoft Camera Enhancer 4.1.1
+ - Dynamsoft Document Normalizer 2.6.11
+
+## 1.0.2 (05/02/2025)
+
+### BREAKING CHANGES
+
+- Renamed `ScanResultView` to `DocumentResultView`.
+- Renamed `DocumentScanResult` to `DocumentResult`.
+- Renamed `scanResultViewConfig` to `resultViewConfig`.
+- Renamed `ControlButton` to `ToolbarConfig`.
+- Changed `text` property for toolbar buttons to `label`.
+
+### New Features
+
+- Added support for `` tags on toolbar icons.
+- Updated the **Share PNG** icon to match other products.
+- Added an **upload button** when users specify the `onUpload` function.
+
+### Fixes
+
+- Fixed an issue where importing an image larger than the canvas dimensions caused the detected border to be positioned incorrectly. This was due to **scaleDown** not working properly.
+
+### Samples
+
+#### Features
+
+- Added a **rotate message** on `/demo.html` to handle landscape mode.
+
+#### Fixes
+
+- Fixed an issue where the **camera and resolution outline logic** would break when transitioning from the **Demo Camera** to the **Live Camera**.
+
+### Built-in Server
+
+- Changed the configuration to allow showcasing the **"Upload"** feature.
+- Added URLs to specific pages when running `npm run serve`.
+
+### Dependencies
+
+- [Dynamsoft Capture Vision JavaScript 2.6.1000](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/release-notes/dcvb.html#261000-01032025)
+ - Dynamsoft Camera Enhancer 4.1.1
+ - Dynamsoft Document Normalizer 2.6.11
+
+## 1.0.0 (27/01/2025)
+
+Initial release
+
+### Dependencies
+
+- [Dynamsoft Capture Vision JavaScript 2.6.1000](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/release-notes/dcvb.html#261000-01032025)
+ - Dynamsoft Camera Enhancer 4.1.1
+ - Dynamsoft Document Normalizer 2.6.11
diff --git a/release-notes/mobile-web-capture.md b/release-notes/mobile-web-capture.md
index cf8f214..cb8c4ec 100644
--- a/release-notes/mobile-web-capture.md
+++ b/release-notes/mobile-web-capture.md
@@ -24,7 +24,7 @@ The most notable improvement in this version is the pluggable scanner feature. T
1. `_imageData` with a `toBlob()` function
2. `imageData: true`
3. `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)
+2. Update MDS 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
@@ -58,7 +58,7 @@ In this release, **Mobile Web Capture (MWC)** has been completely redesigned fro
**MWC** features are organized into configurable UI views. Below is an overview of their main functionalities:
> [!TIP]
-> Learn more in the [MWC user guide]({{ site.guides }}mobile-web-capture.html).
+> Learn more in the [MWC user guide]({{ site.code-gallery }}mobile-web-capture/index.html).
#### Library View
- Organize and manage multiple scanned documents
@@ -82,7 +82,7 @@ In this release, **Mobile Web Capture (MWC)** has been completely redesigned fro
- View upload history
> [!NOTE]
-> The following three views are powered by **Dynamsoft Document Scanner (DDS)**. Learn more in the [DDS user guide]({{ site.guides }}document-scanner.html).
+> The following three views are powered by **Mobile Document Scanner (MDS)**. Learn more in the [MDS user guide]({{ site.guide }}index.html).
#### Document Scanner View
- Camera viewfinder with resolution toggle and more
diff --git a/search.md b/search.md
index 1b02129..b9c263f 100644
--- a/search.md
+++ b/search.md
@@ -1,6 +1,6 @@
---
layout: search-page
-title: Mobile Web Capture Documentation Search
-keywords: Mobile Web Capture Documentation Search
+title: JS Edition Documentation Search
+keywords: Mobile Document Scanner, Web, JS Edition Documentation Search
cx: 912cbb35fff874a8d
---
diff --git a/web.config b/web.config
index 27b0548..f807c1b 100644
--- a/web.config
+++ b/web.config
@@ -40,6 +40,26 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+