From 52ccd06c9aee3ee15eca05cc2450683d943828ae Mon Sep 17 00:00:00 2001 From: h-dynamsoft <172081603+dynamsoft-h@users.noreply.github.com> Date: Wed, 11 Jun 2025 15:13:32 -0700 Subject: [PATCH 01/10] Chores and fixes (#97) * chore: remove VS Code config * chore: update .gitignore for local builds * chore: fix .gitignore * chore: fix .gitignore * remove ignored templates * chore: fix whitespace and EOF newline * chore: fix .gitignore * chore: remove extra .editorconfig * fix: release notes linking * fix: rename release notes sidelist * fix: rename release notes sidelist --------- Co-authored-by: Tom Kent --- .editorconfig | 59 ---- .github/workflows/full-site-build.yml | 12 +- .github/workflows/main.yml | 8 +- .gitignore | 41 ++- .vscode/settings.json | 1 - README.md | 2 +- _config.yml | 90 +++--- _data/full_tree.yml | 4 +- _data/product_version.yml | 2 +- _includes/sidelist-api.html | 2 +- _includes/sidelist-apis-v2.0.html | 2 +- _includes/sidelist-codegallery-v1.1.html | 2 +- _includes/sidelist-codegallery-v2.0.html | 2 +- _includes/sidelist-codegallery.html | 2 +- _includes/sidelist-full-tree-v2.0.html | 2 +- _includes/sidelist-full-tree.html | 2 +- _includes/sidelist-gettingstarted-v1.1.html | 6 +- _includes/sidelist-gettingstarted-v2.0.html | 6 +- _includes/sidelist-gettingstarted.html | 6 +- _includes/sidelist-guides.html | 8 +- _includes/sidelist-introduction-v2.0.html | 2 +- _includes/sidelist-introduction.html | 2 +- _includes/sidelist-release-notes.html | 1 + _includes/sidelist-releasenotes.html | 1 - _layouts/default-layout-OLD.html | 100 ------ _layouts/home-page.html | 50 --- _layouts/search-page-OLD.html | 284 ------------------ assets/js/setLatestVersion.js | 2 +- codegallery/demo/index.md | 2 +- ...re-continuously-edit-result-images-v1.1.md | 2 +- .../capture-single-page-and-then-crop.md | 12 +- .../complete-doc-capturing-workflow.md | 70 ++--- .../detect-boundaries-on-existing-image.md | 12 +- ...tect-boundaries-on-existing-images-v1.1.md | 14 +- codegallery/usecase/index-v1.1.md | 6 +- codegallery/usecase/index.md | 4 +- ...ly-complete-doc-capturing-workflow-v1.1.md | 68 ++--- .../review-adjust-detected-boundaries-v1.1.md | 12 +- faq.md | 1 - gettingstarted/adddependency-v1.1.md | 4 +- gettingstarted/adddependency.md | 1 - gettingstarted/helloworld-continuousmode.md | 58 ++-- gettingstarted/helloworld-singlepage.md | 2 +- gettingstarted/helloworld-v1.1.md | 50 +-- gettingstarted/helloworld.md | 50 +-- gettingstarted/license.md | 2 +- gettingstarted/systemrequirement.md | 6 +- guides/document-scanner-v3.0.md | 20 +- guides/document-scanner.md | 22 +- .../mobile-web-capture-customization-v3.0.md | 26 +- guides/mobile-web-capture-customization.md | 26 +- guides/mobile-web-capture-v3.0.md | 4 +- guides/mobile-web-capture.md | 2 +- index-v1.1.md | 2 +- index.md | 2 +- introduction/index-v3.0.md | 2 +- introduction/index.md | 2 +- release-notes/mobile-web-capture.md | 6 +- search.md | 2 +- web.config | 92 +++--- 60 files changed, 406 insertions(+), 879 deletions(-) delete mode 100644 .editorconfig delete mode 100644 .vscode/settings.json create mode 100644 _includes/sidelist-release-notes.html delete mode 100644 _includes/sidelist-releasenotes.html delete mode 100644 _layouts/default-layout-OLD.html delete mode 100644 _layouts/home-page.html delete mode 100644 _layouts/search-page-OLD.html diff --git a/.editorconfig b/.editorconfig deleted file mode 100644 index 1639887..0000000 --- a/.editorconfig +++ /dev/null @@ -1,59 +0,0 @@ -[*] -cpp_indent_braces=false -cpp_indent_multi_line_relative_to=innermost_parenthesis -cpp_indent_within_parentheses=indent -cpp_indent_preserve_within_parentheses=false -cpp_indent_case_labels=false -cpp_indent_case_contents=true -cpp_indent_case_contents_when_block=false -cpp_indent_lambda_braces_when_parameter=true -cpp_indent_goto_labels=one_left -cpp_indent_preprocessor=leftmost_column -cpp_indent_access_specifiers=false -cpp_indent_namespace_contents=true -cpp_indent_preserve_comments=false -cpp_new_line_before_open_brace_namespace=ignore -cpp_new_line_before_open_brace_type=ignore -cpp_new_line_before_open_brace_function=ignore -cpp_new_line_before_open_brace_block=ignore -cpp_new_line_before_open_brace_lambda=ignore -cpp_new_line_scope_braces_on_separate_lines=false -cpp_new_line_close_brace_same_line_empty_type=false -cpp_new_line_close_brace_same_line_empty_function=false -cpp_new_line_before_catch=true -cpp_new_line_before_else=true -cpp_new_line_before_while_in_do_while=false -cpp_space_before_function_open_parenthesis=remove -cpp_space_within_parameter_list_parentheses=false -cpp_space_between_empty_parameter_list_parentheses=false -cpp_space_after_keywords_in_control_flow_statements=true -cpp_space_within_control_flow_statement_parentheses=false -cpp_space_before_lambda_open_parenthesis=false -cpp_space_within_cast_parentheses=false -cpp_space_after_cast_close_parenthesis=false -cpp_space_within_expression_parentheses=false -cpp_space_before_block_open_brace=true -cpp_space_between_empty_braces=false -cpp_space_before_initializer_list_open_brace=false -cpp_space_within_initializer_list_braces=true -cpp_space_preserve_in_initializer_list=true -cpp_space_before_open_square_bracket=false -cpp_space_within_square_brackets=false -cpp_space_before_empty_square_brackets=false -cpp_space_between_empty_square_brackets=false -cpp_space_group_square_brackets=true -cpp_space_within_lambda_brackets=false -cpp_space_between_empty_lambda_brackets=false -cpp_space_before_comma=false -cpp_space_after_comma=true -cpp_space_remove_around_member_operators=true -cpp_space_before_inheritance_colon=true -cpp_space_before_constructor_colon=true -cpp_space_remove_before_semicolon=true -cpp_space_after_semicolon=false -cpp_space_remove_around_unary_operator=true -cpp_space_around_binary_operator=insert -cpp_space_around_assignment_operator=insert -cpp_space_pointer_reference_alignment=left -cpp_space_around_ternary_operator=insert -cpp_wrap_preserve_blocks=one_liners diff --git a/.github/workflows/full-site-build.yml b/.github/workflows/full-site-build.yml index a491315..306588f 100644 --- a/.github/workflows/full-site-build.yml +++ b/.github/workflows/full-site-build.yml @@ -43,10 +43,9 @@ jobs: server: ${{ secrets.FTP_DYNAMSOFT_LOCAL_SERVER }} username: ${{ secrets.FTP_DYNAMSOFT_LOCAL_USER }} password: ${{ secrets.FTP_DYNAMSOFT_LOCAL_PASSWORD }} - port: 21 + port: 21 local-dir: /home/ubuntu/MWCDoc/_site/ - server-dir: /www.dynamsoft.com/mobile-web-capture/docs/ - + server-dir: /www.dynamsoft.com/mobile-web-capture/docs/ Build-Preview: if: ${{ github.ref == 'refs/heads/preview' }} @@ -57,8 +56,7 @@ jobs: steps: # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it #- uses: actions/checkout@v2 - - + # Runs a set of commands using the runners shell - name: Build the site run: | @@ -72,7 +70,6 @@ jobs: sed -i -e "1,3s/blob\/master$/blob\/preview/" \ -e "1,3s/blob\/main$/blob\/preview/" /home/ubuntu/MWCDocPreview/_config.yml cd MWCDocPreview && bundle exec jekyll build - - name: Sync files uses: SamKirkland/FTP-Deploy-Action@4.3.0 @@ -80,7 +77,6 @@ jobs: server: ${{ secrets.FTP_TEST_SITE_SERVER }} username: ${{ secrets.FTP_TEST_SITE_USER }} password: ${{ secrets.FTP_TEST_SITE_PASSWORD }} - port: 7500 + port: 7500 local-dir: /home/ubuntu/MWCDocPreview/_site/ server-dir: /www.dynamsoft.com/mobile-web-capture/docs/ - diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 0d2ad81..9137b0c 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -6,9 +6,9 @@ name: CI on: # Triggers the workflow on push events but only for the master branch push: - branches: - - main - # - preview + branches: + - main + # - preview # Allows you to run this workflow manually from the Actions tab workflow_dispatch: @@ -30,4 +30,4 @@ jobs: with: doc-repo: mobile-web-capture-docs doc-url: mobile-web-capture/docs/ - secrets: inherit \ No newline at end of file + secrets: inherit diff --git a/.gitignore b/.gitignore index f14b74d..4f9e1ef 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,38 @@ -################################################################################ -# 此 .gitignore 文件已由 Microsoft(R) Visual Studio 自动创建。 -################################################################################ +# Layout templates +_layouts/ -/.vs +# Assets +assets/font-face/ +assets/img-icon/ +assets/js/** +!assets/js/setLatestVersion.js +assets/scripts/ +assets/css/ + +# Includes +_includes/productNav/ +_includes/auto-version-list.html +_includes/head.html +_includes/liquid_autoGenerateHistoryList.html +_includes/liquid_breadcrumb.html +_includes/liquid_generateFullTree.html +_includes/liquid_searchVersionTreeFile.html +_includes/livehelp.html +_includes/main-page-head.html +_includes/page_footer.html +_includes/page_header.html +_includes/productNav_OLD.html +_includes/productNav.html +_includes/search-input.html +_includes/trialLicense.html + +# Plugins +_plugins/ + +# Site resources +_site/ + +sitemap.xml +Hide_Tree_Page.md +Gemfile.lock +Gemfile diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 9e26dfe..0000000 --- a/.vscode/settings.json +++ /dev/null @@ -1 +0,0 @@ -{} \ No newline at end of file diff --git a/README.md b/README.md index ca56222..955261e 100644 --- a/README.md +++ b/README.md @@ -1 +1 @@ -# Mobile-Web-Capture-Docs \ No newline at end of file +# Mobile-Web-Capture-Docs diff --git a/_config.yml b/_config.yml index 1394a58..fe0b774 100644 --- a/_config.yml +++ b/_config.yml @@ -1,46 +1,44 @@ -repository: dynamsoft-docs/mobile-web-capture-docs -repositoryUrl: https://github.com/dynamsoft-docs/mobile-web-capture-docs/blob/main -docFullPath: https://www.dynamsoft.com/mobile-web-capture/docs -firstLevelUrl: /mobile-web-capture/docs -docHomePage: /mobile-web-capture/docs/introduction/ - -introduction: /mobile-web-capture/docs/introduction/ -gettingstarted: /mobile-web-capture/docs/gettingstarted/ -codegallery: /mobile-web-capture/docs/codegallery/ -api: /mobile-web-capture/docs/api/ - -guides: /mobile-web-capture/docs/guides/ - - -releasenotes: /mobile-web-capture/docs/releasenotes/ - -useVersionTree: true - -assets: /mobile-web-capture/docs/assets/ -edit_icon: /mobile-web-capture/docs/assets/img-icon/edit-icon.png -smile_icon: /mobile-web-capture/docs/assets/img-icon/icon-smile.png -sad_icon: /mobile-web-capture/docs/assets/img-icon/icon-sad.png - -baseurl: "/mobile-web-capture/docs" - -download: "/mobile-web-capture/downloads/" - -plugins: - - jemoji - - jekyll-sitemap - - -defaults: - - scope: - path: "" - values: - layout: "default-layout" - noTitleIndex: true - needAutoGenerateSidebar: true - needGenerateH3Content: true - - scope: - path: "Hide_Tree_Page.html" - values: - sitemap: false - -url: "https://www.dynamsoft.com" # sitemap root +repository: dynamsoft-docs/mobile-web-capture-docs +repositoryUrl: https://github.com/dynamsoft-docs/mobile-web-capture-docs/blob/main +docFullPath: https://www.dynamsoft.com/mobile-web-capture/docs +firstLevelUrl: /mobile-web-capture/docs +docHomePage: /mobile-web-capture/docs/introduction/ + +introduction: /mobile-web-capture/docs/introduction/ +gettingstarted: /mobile-web-capture/docs/gettingstarted/ +codegallery: /mobile-web-capture/docs/codegallery/ +api: /mobile-web-capture/docs/api/ + +guides: /mobile-web-capture/docs/guides/ + +release-notes: /mobile-web-capture/docs/release-notes/ + +useVersionTree: true + +assets: /mobile-web-capture/docs/assets/ +edit_icon: /mobile-web-capture/docs/assets/img-icon/edit-icon.png +smile_icon: /mobile-web-capture/docs/assets/img-icon/icon-smile.png +sad_icon: /mobile-web-capture/docs/assets/img-icon/icon-sad.png + +baseurl: "/mobile-web-capture/docs" + +download: "/mobile-web-capture/downloads/" + +plugins: + - jemoji + - jekyll-sitemap + +defaults: + - scope: + path: "" + values: + layout: "default-layout" + noTitleIndex: true + needAutoGenerateSidebar: true + needGenerateH3Content: true + - scope: + path: "Hide_Tree_Page.html" + values: + sitemap: false + +url: "https://www.dynamsoft.com" # sitemap root diff --git a/_data/full_tree.yml b/_data/full_tree.yml index c87f50e..0612ff8 100644 --- a/_data/full_tree.yml +++ b/_data/full_tree.yml @@ -2,8 +2,8 @@ tree_file_list: - sidelist-introduction.html - sidelist-guides.html - sidelist-api.html - - sidelist-releasenotes.html + - sidelist-release-notes.html - sidelist-full-tree.html - sidelist-apis-v2.0.html - sidelist-full-tree.v2.0.html - - sidelist-introduction-v2.0.html \ No newline at end of file + - sidelist-introduction-v2.0.html diff --git a/_data/product_version.yml b/_data/product_version.yml index 0e57e44..115417f 100644 --- a/_data/product_version.yml +++ b/_data/product_version.yml @@ -6,4 +6,4 @@ version_info_list: - value: 2.0 - value: 1.x child: - - 1.1 \ No newline at end of file + - 1.1 diff --git a/_includes/sidelist-api.html b/_includes/sidelist-api.html index 075348e..f146fc0 100644 --- a/_includes/sidelist-api.html +++ b/_includes/sidelist-api.html @@ -3,4 +3,4 @@
  • Document Scanner
  • Mobile Web Capture
    • - \ No newline at end of file + diff --git a/_includes/sidelist-apis-v2.0.html b/_includes/sidelist-apis-v2.0.html index f1591ed..1f23c0c 100644 --- a/_includes/sidelist-apis-v2.0.html +++ b/_includes/sidelist-apis-v2.0.html @@ -1 +1 @@ -
  • Related API Reference
    • \ No newline at end of file +
  • Related API Reference
    • diff --git a/_includes/sidelist-codegallery-v1.1.html b/_includes/sidelist-codegallery-v1.1.html index 5b76e6d..9294268 100644 --- a/_includes/sidelist-codegallery-v1.1.html +++ b/_includes/sidelist-codegallery-v1.1.html @@ -10,4 +10,4 @@ {% comment %}
  • Demo
    • {% endcomment %} - \ No newline at end of file + diff --git a/_includes/sidelist-codegallery-v2.0.html b/_includes/sidelist-codegallery-v2.0.html index 96d924d..7f51986 100644 --- a/_includes/sidelist-codegallery-v2.0.html +++ b/_includes/sidelist-codegallery-v2.0.html @@ -9,4 +9,4 @@ {% comment %}
  • Demo
    • {% endcomment %} - \ No newline at end of file + diff --git a/_includes/sidelist-codegallery.html b/_includes/sidelist-codegallery.html index 96d924d..7f51986 100644 --- a/_includes/sidelist-codegallery.html +++ b/_includes/sidelist-codegallery.html @@ -9,4 +9,4 @@ {% comment %}
  • Demo
    • {% endcomment %} - \ No newline at end of file + diff --git a/_includes/sidelist-full-tree-v2.0.html b/_includes/sidelist-full-tree-v2.0.html index 91a6d4c..0fd0efc 100644 --- a/_includes/sidelist-full-tree-v2.0.html +++ b/_includes/sidelist-full-tree-v2.0.html @@ -2,4 +2,4 @@ {%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-gettingstarted.html" -%} {%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-codegallery.html" -%} {%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-apis.html" -%} -{%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-releasenotes.html" -%} \ No newline at end of file +{%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-release-notes.html" -%} diff --git a/_includes/sidelist-full-tree.html b/_includes/sidelist-full-tree.html index cd1476b..241f2ba 100644 --- a/_includes/sidelist-full-tree.html +++ b/_includes/sidelist-full-tree.html @@ -4,4 +4,4 @@ {%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-api.html" -%} -{%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-releasenotes.html" -%} \ No newline at end of file +{%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-release-notes.html" -%} diff --git a/_includes/sidelist-gettingstarted-v1.1.html b/_includes/sidelist-gettingstarted-v1.1.html index 0f92aad..2a2cd7d 100644 --- a/_includes/sidelist-gettingstarted-v1.1.html +++ b/_includes/sidelist-gettingstarted-v1.1.html @@ -2,7 +2,7 @@ - \ No newline at end of file + diff --git a/_includes/sidelist-gettingstarted-v2.0.html b/_includes/sidelist-gettingstarted-v2.0.html index 48e419e..429e944 100644 --- a/_includes/sidelist-gettingstarted-v2.0.html +++ b/_includes/sidelist-gettingstarted-v2.0.html @@ -2,8 +2,8 @@ - \ No newline at end of file + diff --git a/_includes/sidelist-gettingstarted.html b/_includes/sidelist-gettingstarted.html index 849026d..a663975 100644 --- a/_includes/sidelist-gettingstarted.html +++ b/_includes/sidelist-gettingstarted.html @@ -2,8 +2,8 @@ - \ No newline at end of file + diff --git a/_includes/sidelist-guides.html b/_includes/sidelist-guides.html index 82f7c60..a0d1957 100644 --- a/_includes/sidelist-guides.html +++ b/_includes/sidelist-guides.html @@ -1,7 +1,7 @@
  • Developer Guides -
    • \ No newline at end of file + diff --git a/_includes/sidelist-introduction-v2.0.html b/_includes/sidelist-introduction-v2.0.html index 9ec7e76..d85ab5c 100644 --- a/_includes/sidelist-introduction-v2.0.html +++ b/_includes/sidelist-introduction-v2.0.html @@ -1 +1 @@ -
  • Introduction
    • \ No newline at end of file +
  • Introduction
    • diff --git a/_includes/sidelist-introduction.html b/_includes/sidelist-introduction.html index 9ec7e76..d85ab5c 100644 --- a/_includes/sidelist-introduction.html +++ b/_includes/sidelist-introduction.html @@ -1 +1 @@ -
  • Introduction
    • \ No newline at end of file +
  • Introduction
    • diff --git a/_includes/sidelist-release-notes.html b/_includes/sidelist-release-notes.html new file mode 100644 index 0000000..5824f96 --- /dev/null +++ b/_includes/sidelist-release-notes.html @@ -0,0 +1 @@ +
  • Release Notes
    • diff --git a/_includes/sidelist-releasenotes.html b/_includes/sidelist-releasenotes.html deleted file mode 100644 index c731573..0000000 --- a/_includes/sidelist-releasenotes.html +++ /dev/null @@ -1 +0,0 @@ -
  • Release Notes
    • \ No newline at end of file diff --git a/_layouts/default-layout-OLD.html b/_layouts/default-layout-OLD.html deleted file mode 100644 index 2495393..0000000 --- a/_layouts/default-layout-OLD.html +++ /dev/null @@ -1,100 +0,0 @@ - - - -{%- include head.html -%} -{%- assign noTitleIndex = "" -%} -{%- if page.noTitleIndex or page.url contains 'release-notes' -%} - {%- assign noTitleIndex = "noTitleIndex" -%} -{%- endif -%} - - - {% assign url = 'https://www.dynamsoft.com/shared/head/' %} - {% remote_include {{ url }} %} - - {%- include mwcNav.html -%} -
    Table of contents
    -
    -
    -
    -
    - {%- include main-page-head.html -%} -
    -
    -
    - {{ content }} -
    -
    -
    -

    Is this page helpful?

    - YesYes - NoNo -
    -
    - {%- if page.needAutoGenerateSidebar -%} -

    In this article:

    -
    - {%- endif -%} -
    -
    - -
    - -
    -
    -
    -
    -
    - {%- include liquid_autoGenerateHistoryList.html -%} - {%- include auto-version-list.html -%} -
    -
    -
    - -
    - {%- include page_footer.html -%} -
    - - - - - {%- include livehelp.html -%} - - - - - - - - - - - diff --git a/_layouts/home-page.html b/_layouts/home-page.html deleted file mode 100644 index 138adf8..0000000 --- a/_layouts/home-page.html +++ /dev/null @@ -1,50 +0,0 @@ - - - -{%- include head.html -%} - - - - - {% assign url = 'https://www.dynamsoft.com/shared/head/' %} - {% remote_include {{ url }} %} - -
    -
    -
    - - {{ content }} -
    -
    -
    -
    - {%- include page_footer.html -%} -
    - - - - - - - diff --git a/_layouts/search-page-OLD.html b/_layouts/search-page-OLD.html deleted file mode 100644 index 9bd9dcb..0000000 --- a/_layouts/search-page-OLD.html +++ /dev/null @@ -1,284 +0,0 @@ - - - -{%- include head.html -%} - - - - {% assign url = 'https://www.dynamsoft.com/shared/head/' %} - {% remote_include {{ url }} %} - -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    - -
    Documentation
    -
    -
    -
    -
    -
    -
    Table of contents
    -
    -
    -
    -
    -
    -
    -
    -

    Search

    - -
    -
    -
    -
    - -
    -
    -
    -
    -
    - {%- include page_footer.html -%} -
    - - - - - {%- if page.needAutoGenerateSidebar -%} - {%- unless page.needGenerateH3Content -%} - - {%- else -%} - - {%- endunless -%} - {%- else -%} - - {%- endif -%} - - - - {%- include livehelp.html -%} - - - \ No newline at end of file diff --git a/assets/js/setLatestVersion.js b/assets/js/setLatestVersion.js index bd3ea28..6aec0fd 100644 --- a/assets/js/setLatestVersion.js +++ b/assets/js/setLatestVersion.js @@ -2,4 +2,4 @@ var versionNoteLatestVersion = "18.3" $(function() { $("#versionNoteLatestVersion").text(" (" + versionNoteLatestVersion + ")") -}) \ No newline at end of file +}) diff --git a/codegallery/demo/index.md b/codegallery/demo/index.md index 4cee61f..0e7d08d 100644 --- a/codegallery/demo/index.md +++ b/codegallery/demo/index.md @@ -10,4 +10,4 @@ description: Mobile Web Capture Documentation Demo permalink: /codegallery/demo/index.html --- -# Demo \ No newline at end of file +# Demo diff --git a/codegallery/usecase/capture-continuously-edit-result-images-v1.1.md b/codegallery/usecase/capture-continuously-edit-result-images-v1.1.md index fbc516e..6ad3b99 100644 --- a/codegallery/usecase/capture-continuously-edit-result-images-v1.1.md +++ b/codegallery/usecase/capture-continuously-edit-result-images-v1.1.md @@ -583,4 +583,4 @@ Sometimes, you may want to add some auxiliary text to icons to show better user ### Refer to -- [Customize Elements' Display Text](https://www.dynamsoft.com/document-viewer/docs/ui/customize/elements.html#display-text) \ No newline at end of file +- [Customize Elements' Display Text](https://www.dynamsoft.com/document-viewer/docs/ui/customize/elements.html#display-text) diff --git a/codegallery/usecase/capture-single-page-and-then-crop.md b/codegallery/usecase/capture-single-page-and-then-crop.md index e26bd85..732254a 100644 --- a/codegallery/usecase/capture-single-page-and-then-crop.md +++ b/codegallery/usecase/capture-single-page-and-then-crop.md @@ -34,7 +34,7 @@ In this sample, we would like to achieve the workflow as below. type: Dynamsoft.DDV.Elements.Layout, className: "ddv-perspective-viewer-header-mobile", children: [ - { + { // Add a "Back" button in perspective viewer's header and bind the event to go back to the capture viewer // The event will be registered later type: Dynamsoft.DDV.Elements.Button, @@ -241,7 +241,7 @@ document.getElementById("restore").onclick = () => { } }); // Play video stream in 1080P - captureViewer.play({ + captureViewer.play({ resolution: [1920,1080], fill: true }); @@ -259,7 +259,7 @@ document.getElementById("restore").onclick = () => { type: Dynamsoft.DDV.Elements.Layout, className: "ddv-perspective-viewer-header-mobile", children: [ - { + { // Add a "Back" button in perspective viewer's header and bind the event // The event will be registered later type: Dynamsoft.DDV.Elements.Button, @@ -316,7 +316,7 @@ document.getElementById("restore").onclick = () => { viewerConfig:{ scrollToLatest: true, } - }); + }); // Register the event for "Back" button perspectiveViewer.on("backToCaptureViewer",() => { @@ -331,7 +331,7 @@ document.getElementById("restore").onclick = () => { if(count === 0) { switchViewer(true,false) } - }); + }); // Register the event for "PerspectiveAll" button to display the result image perspectiveViewer.on("done", async () => { @@ -387,4 +387,4 @@ Sometimes, you may want to add some auxiliary text to icons to show better user ### Refer to -- [Customize Elements' Display Text](https://www.dynamsoft.com/document-viewer/docs/ui/customize/elements.html#display-text) \ No newline at end of file +- [Customize Elements' Display Text](https://www.dynamsoft.com/document-viewer/docs/ui/customize/elements.html#display-text) diff --git a/codegallery/usecase/complete-doc-capturing-workflow.md b/codegallery/usecase/complete-doc-capturing-workflow.md index 8471d7f..41bcdda 100644 --- a/codegallery/usecase/complete-doc-capturing-workflow.md +++ b/codegallery/usecase/complete-doc-capturing-workflow.md @@ -130,12 +130,12 @@ export async function initDocDetectModule(DDV, CVR) { success: false }); }; - + let width = image.width; let height = image.height; let ratio = 1; let data; - + if (height > 720) { ratio = height / 720; height = 720; @@ -144,8 +144,8 @@ export async function initDocDetectModule(DDV, CVR) { } else { data = image.data.slice(0); } - - + + // Define DSImage according to the usage of DDN const DSImage = { bytes: new Uint8Array(data), @@ -154,33 +154,33 @@ export async function initDocDetectModule(DDV, CVR) { stride: width * 4, //RGBA format: 10 // IPF_ABGR_8888 }; - + // Use DDN normalized module const results = await router.capture(DSImage, 'detect-document-boundaries'); - + // Filter the results and generate corresponding return values if (results.items.length <= 0) { return Promise.resolve({ success: false }); }; - + const quad = []; results.items[0].location.points.forEach((p) => { quad.push([p.x * ratio, p.y * ratio]); }); - + const detectResult = this.processDetectResult({ location: quad, width: image.width, height: image.height, config }); - + return Promise.resolve(detectResult); } } - + DDV.setProcessingHandler('documentBoundariesDetect', new DDNNormalizeHandler()) } @@ -197,42 +197,42 @@ function compress( } catch (error) { source = new Uint8Array(imageData); } - + const scaleW = newWidth / imageWidth; const scaleH = newHeight / imageHeight; const targetSize = newWidth * newHeight * 4; const targetMemory = new ArrayBuffer(targetSize); let distData = null; - + try { distData = new Uint8ClampedArray(targetMemory, 0, targetSize); } catch (error) { distData = new Uint8Array(targetMemory, 0, targetSize); } - + const filter = (distCol, distRow) => { const srcCol = Math.min(imageWidth - 1, distCol / scaleW); const srcRow = Math.min(imageHeight - 1, distRow / scaleH); const intCol = Math.floor(srcCol); const intRow = Math.floor(srcRow); - + let distI = (distRow * newWidth) + distCol; let srcI = (intRow * imageWidth) + intCol; - + distI *= 4; srcI *= 4; - + for (let j = 0; j <= 3; j += 1) { distData[distI + j] = source[srcI + j]; } }; - + for (let col = 0; col < newWidth; col += 1) { for (let row = 0; row < newHeight; row += 1) { filter(col, row); } } - + return distData; } ``` @@ -280,8 +280,8 @@ To capture images, we need to create a capture viewer. // Bind click event to "ImagePreview" element // The event will be registered later type: Dynamsoft.DDV.Elements.ImagePreview, - events: { - click: "showPerspectiveViewer" + events: { + click: "showPerspectiveViewer" }, }, Dynamsoft.DDV.Elements.CameraConvert, @@ -290,7 +290,7 @@ To capture images, we need to create a capture viewer. ], }; ``` - + - Create the viewer by using the new `UiConfig`. ```javascript @@ -324,7 +324,7 @@ To capture images, we need to create a capture viewer. type: Dynamsoft.DDV.Elements.Layout, className: "ddv-perspective-viewer-header-mobile", children: [ - { + { // Add a "Back" button in perspective viewer's header and bind the event to go back to capture viewer // The event will be registered later type: Dynamsoft.DDV.Elements.Button, @@ -383,7 +383,7 @@ To capture images, we need to create a capture viewer. ## Create an edit viewer -To review and edit the captured images, we create an edit viewer. +To review and edit the captured images, we create an edit viewer. - Customize the capture viewer `UiConfig` based on the [default one](https://www.dynamsoft.com/document-viewer/docs/ui/default_ui.html#edit-viewer) to implement the workflow. - Add a "Back" buttom to header and bind click event to go back the perspective viewer @@ -479,7 +479,7 @@ To review and edit the captured images, we create an edit viewer. ```javascript perspectiveViewer.on("showEditViewer",() => { switchViewer(0,0,1) - }); + }); ``` - Register an event in `perspectiveViewer` to go back the capture viewer. @@ -487,7 +487,7 @@ To review and edit the captured images, we create an edit viewer. ```javascript perspectiveViewer.on("backToCaptureViewer",() => { switchViewer(1,0,0); - }); + }); ``` - Register an event in `editViewer` to go back the perspective viewer. @@ -495,7 +495,7 @@ To review and edit the captured images, we create an edit viewer. ```javascript editViewer.on("backToPerspectiveViewer",() => { switchViewer(0,1,0); - }); + }); ``` ## Review the complete code @@ -573,8 +573,8 @@ To review and edit the captured images, we create an edit viewer. // Bind click event to "ImagePreview" element // The event will be registered later type: Dynamsoft.DDV.Elements.ImagePreview, - events: { - click: "showPerspectiveViewer" + events: { + click: "showPerspectiveViewer" }, }, Dynamsoft.DDV.Elements.CameraConvert, @@ -607,7 +607,7 @@ To review and edit the captured images, we create an edit viewer. type: Dynamsoft.DDV.Elements.Layout, className: "ddv-perspective-viewer-header-mobile", children: [ - { + { // Add a "Back" button in perspective viewer's header and bind the event to go back to capture viewer // The event will be registered later type: Dynamsoft.DDV.Elements.Button, @@ -687,11 +687,11 @@ To review and edit the captured images, we create an edit viewer. Dynamsoft.DDV.Elements.Filter, Dynamsoft.DDV.Elements.Undo, Dynamsoft.DDV.Elements.Delete, - Dynamsoft.DDV.Elements.AnnotationSet, + Dynamsoft.DDV.Elements.AnnotationSet, ], }, ], - }; + }; // Create an edit viewer const editViewer = new Dynamsoft.DDV.EditViewer({ @@ -708,17 +708,17 @@ To review and edit the captured images, we create an edit viewer. // Register an event in `perspectiveViewer` to show the edit viewer perspectiveViewer.on("showEditViewer",() => { switchViewer(0,0,1) - }); + }); // Register an event in `perspectiveViewer` to go back the capture viewer perspectiveViewer.on("backToCaptureViewer",() => { switchViewer(1,0,0); - }); + }); // Register an event in `editViewer` to go back the perspective viewer editViewer.on("backToPerspectiveViewer",() => { switchViewer(0,1,0); - }); + }); // Control viewers' visibility. function switchViewer(capture, perspective, edit) { @@ -753,4 +753,4 @@ Sometimes, you may want to add some auxiliary text to icons to show better user ### Refer to -- [Customize Elements' Display Text](https://www.dynamsoft.com/document-viewer/docs/ui/customize/elements.html#display-text) \ No newline at end of file +- [Customize Elements' Display Text](https://www.dynamsoft.com/document-viewer/docs/ui/customize/elements.html#display-text) diff --git a/codegallery/usecase/detect-boundaries-on-existing-image.md b/codegallery/usecase/detect-boundaries-on-existing-image.md index f128f33..ad5a70e 100644 --- a/codegallery/usecase/detect-boundaries-on-existing-image.md +++ b/codegallery/usecase/detect-boundaries-on-existing-image.md @@ -134,7 +134,7 @@ router.maxCvsSideLength = 99999; ## Create a perspective viewer -To review the detected boundaries on the loaded image(s), we will create a perspective viewer. +To review the detected boundaries on the loaded image(s), we will create a perspective viewer. - Customize the perspective viewer `UiConfig` - Bind click event to "PerspectiveAll" button. @@ -172,7 +172,7 @@ To review the detected boundaries on the loaded image(s), we will create a persp // Replace the default "RotateRight" button with an "AddNew" button in perspective viewer's footer and bind event to the new button // The event will be registered later type: Dynamsoft.DDV.Elements.Button, - className: "ddv-load-image2 addNewButton", + className: "ddv-load-image2 addNewButton", events: { click: "addNew" }, @@ -240,14 +240,14 @@ export function createFileInput(viewer, router){ const blob = new Blob([files[i]], { type: files[i].type, }); - const detectResult = await router.capture(blob, "detect-document-boundaries"); + const detectResult = await router.capture(blob, "detect-document-boundaries"); if(detectResult.items.length >0) { const quad = []; detectResult.items[0].location.points.forEach(p => { quad.push([p.x, p.y]); }); - + sourceArray.push({ fileData: blob, extraPageData:[{ @@ -387,7 +387,7 @@ document.getElementById("restore").onclick = () => { // Replace the default "RotateRight" button with an "AddNew" button in perspective viewer's footer and bind event to the new button // The event will be registered later type: Dynamsoft.DDV.Elements.Button, - className: "ddv-load-image2 addNewButton", + className: "ddv-load-image2 addNewButton", events: { click: "addNew" }, @@ -458,4 +458,4 @@ Sometimes, you may want to add some auxiliary text to icons to show better user ### Refer to -- [Customize Elements' Display Text](https://www.dynamsoft.com/document-viewer/docs/ui/customize/elements.html#display-text) \ No newline at end of file +- [Customize Elements' Display Text](https://www.dynamsoft.com/document-viewer/docs/ui/customize/elements.html#display-text) diff --git a/codegallery/usecase/detect-boundaries-on-existing-images-v1.1.md b/codegallery/usecase/detect-boundaries-on-existing-images-v1.1.md index e66eb66..ee912ee 100644 --- a/codegallery/usecase/detect-boundaries-on-existing-images-v1.1.md +++ b/codegallery/usecase/detect-boundaries-on-existing-images-v1.1.md @@ -12,7 +12,7 @@ permalink: /codegallery/usecases/detect-boundaries-on-existing-images-v1.1.html # Detect boundaries on the existing images -This sample demonstrates how to detect the boundaries on the existing images which are from local directory/album. +This sample demonstrates how to detect the boundaries on the existing images which are from local directory/album. [Check out it online](https://dynamsoft.github.io/mobile-web-capture/samples/detect-boundaries-on-existing-images/) @@ -108,7 +108,7 @@ router.maxCvsSideLength = 99999; ## Create a perspective viewer -To review the detected boundaries on the loaded image(s), we will create a perspective viewer. +To review the detected boundaries on the loaded image(s), we will create a perspective viewer. - Customize the perspective viewer `UiConfig` - Bind click event to "PerspectiveAll" button. @@ -146,7 +146,7 @@ To review the detected boundaries on the loaded image(s), we will create a persp // Replace the default "RotateRight" button with an "AddNew" button in perspective viewer's footer and bind event to the new button // The event will be registered later type: Dynamsoft.DDV.Elements.Button, - className: "ddv-load-image2 addNewButton", + className: "ddv-load-image2 addNewButton", events: { click: "addNew" }, @@ -214,14 +214,14 @@ export function createFileInput(viewer, router){ const blob = new Blob([files[i]], { type: files[i].type, }); - const detectResult = await router.capture(blob, "detect-document-boundaries"); + const detectResult = await router.capture(blob, "detect-document-boundaries"); if(detectResult.items.length >0) { const quad = []; detectResult.items[0].location.points.forEach(p => { quad.push([p.x, p.y]); }); - + sourceArray.push({ fileData: blob, extraPageData:[{ @@ -348,7 +348,7 @@ Since the workflow in this sample is very simple, only the two events mentioned // Replace the default "RotateRight" button with an "AddNew" button in perspective viewer's footer and bind event to the new button // The event will be registered later type: Dynamsoft.DDV.Elements.Button, - className: "ddv-load-image2 addNewButton", + className: "ddv-load-image2 addNewButton", events: { click: "addNew" }, @@ -412,4 +412,4 @@ Sometimes, you may want to add some auxiliary text to icons to show better user ### Refer to -- [Customize Elements' Display Text](https://www.dynamsoft.com/document-viewer/docs/ui/customize/elements.html#display-text) \ No newline at end of file +- [Customize Elements' Display Text](https://www.dynamsoft.com/document-viewer/docs/ui/customize/elements.html#display-text) diff --git a/codegallery/usecase/index-v1.1.md b/codegallery/usecase/index-v1.1.md index 917423a..c4202e0 100644 --- a/codegallery/usecase/index-v1.1.md +++ b/codegallery/usecase/index-v1.1.md @@ -6,13 +6,13 @@ noTitleIndex: true title: Mobile Web Capture - Use Cases keywords: Documentation, Mobile Web Capture, Use Cases breadcrumbText: Use Cases -description: Mobile Web Capture Documentation Use Cases +description: Mobile Web Capture Documentation Use Cases permalink: /codegallery/usecases/index-v1.1.html --- # Use Cases -Because the two SDKs, DDV and DDN, support comprehensive functions and flexible and efficient development, Mobile Web Capture can meet various workflows and needs. +Because the two SDKs, DDV and DDN, support comprehensive functions and flexible and efficient development, Mobile Web Capture can meet various workflows and needs. This part will introduce four popular use cases that the Mobile Web Capture solution can achieve. @@ -30,4 +30,4 @@ This part will introduce four popular use cases that the Mobile Web Capture solu - [Detect boundaries on the existing images]({{ site.codegallery }}usecases/detect-boundaries-on-existing-images-v1.1.html) - This sample demonstrates the use case that supports detecting the boundaries on the existing images from the local directory/album. + This sample demonstrates the use case that supports detecting the boundaries on the existing images from the local directory/album. diff --git a/codegallery/usecase/index.md b/codegallery/usecase/index.md index 6286094..a8b2045 100644 --- a/codegallery/usecase/index.md +++ b/codegallery/usecase/index.md @@ -6,13 +6,13 @@ noTitleIndex: true title: Mobile Web Capture - Use Cases keywords: Documentation, Mobile Web Capture, Use Cases breadcrumbText: Use Cases -description: Mobile Web Capture Documentation Use Cases +description: Mobile Web Capture Documentation Use Cases permalink: /codegallery/usecases/index.html --- # Use Cases -Because the two SDKs, DDV and DDN, support comprehensive functions and flexible and efficient development, Mobile Web Capture can meet various workflows and needs. +Because the two SDKs, DDV and DDN, support comprehensive functions and flexible and efficient development, Mobile Web Capture can meet various workflows and needs. This part will introduce four popular use cases that the Mobile Web Capture solution can achieve. diff --git a/codegallery/usecase/relatively-complete-doc-capturing-workflow-v1.1.md b/codegallery/usecase/relatively-complete-doc-capturing-workflow-v1.1.md index 7c86670..34c47e6 100644 --- a/codegallery/usecase/relatively-complete-doc-capturing-workflow-v1.1.md +++ b/codegallery/usecase/relatively-complete-doc-capturing-workflow-v1.1.md @@ -130,12 +130,12 @@ export async function initDocDetectModule(DDV, CVR) { success: false }); }; - + let width = image.width; let height = image.height; let ratio = 1; let data; - + if (height > 720) { ratio = height / 720; height = 720; @@ -144,8 +144,8 @@ export async function initDocDetectModule(DDV, CVR) { } else { data = image.data.slice(0); } - - + + // Define DSImage according to the usage of DDN const DSImage = { bytes: new Uint8Array(data), @@ -154,33 +154,33 @@ export async function initDocDetectModule(DDV, CVR) { stride: width * 4, //RGBA format: 10 // IPF_ABGR_8888 }; - + // Use DDN normalized module const results = await router.capture(DSImage, 'detect-document-boundaries'); - + // Filter the results and generate corresponding return values if (results.items.length <= 0) { return Promise.resolve({ success: false }); }; - + const quad = []; results.items[0].location.points.forEach((p) => { quad.push([p.x * ratio, p.y * ratio]); }); - + const detectResult = this.processDetectResult({ location: quad, width: image.width, height: image.height, config }); - + return Promise.resolve(detectResult); } } - + DDV.setProcessingHandler('documentBoundariesDetect', new DDNNormalizeHandler()) } @@ -197,42 +197,42 @@ function compress( } catch (error) { source = new Uint8Array(imageData); } - + const scaleW = newWidth / imageWidth; const scaleH = newHeight / imageHeight; const targetSize = newWidth * newHeight * 4; const targetMemory = new ArrayBuffer(targetSize); let distData = null; - + try { distData = new Uint8ClampedArray(targetMemory, 0, targetSize); } catch (error) { distData = new Uint8Array(targetMemory, 0, targetSize); } - + const filter = (distCol, distRow) => { const srcCol = Math.min(imageWidth - 1, distCol / scaleW); const srcRow = Math.min(imageHeight - 1, distRow / scaleH); const intCol = Math.floor(srcCol); const intRow = Math.floor(srcRow); - + let distI = (distRow * newWidth) + distCol; let srcI = (intRow * imageWidth) + intCol; - + distI *= 4; srcI *= 4; - + for (let j = 0; j <= 3; j += 1) { distData[distI + j] = source[srcI + j]; } }; - + for (let col = 0; col < newWidth; col += 1) { for (let row = 0; row < newHeight; row += 1) { filter(col, row); } } - + return distData; } ``` @@ -280,8 +280,8 @@ To capture images, we need to create a capture viewer. // Bind click event to "ImagePreview" element // The event will be registered later type: Dynamsoft.DDV.Elements.ImagePreview, - events: { - click: "showPerspectiveViewer" + events: { + click: "showPerspectiveViewer" }, }, Dynamsoft.DDV.Elements.CameraConvert, @@ -290,7 +290,7 @@ To capture images, we need to create a capture viewer. ], }; ``` - + - Create the viewer by using the new `UiConfig`. ```javascript @@ -324,7 +324,7 @@ To capture images, we need to create a capture viewer. type: Dynamsoft.DDV.Elements.Layout, className: "ddv-perspective-viewer-header-mobile", children: [ - { + { // Add a "Back" button in perspective viewer's header and bind the event to go back to capture viewer // The event will be registered later type: Dynamsoft.DDV.Elements.Button, @@ -383,7 +383,7 @@ To capture images, we need to create a capture viewer. ## Create an edit viewer -To review and edit the captured images, we create an edit viewer. +To review and edit the captured images, we create an edit viewer. - Customize the capture viewer `UiConfig` based on the [default one](https://www.dynamsoft.com/document-viewer/docs/ui/default_ui.html#edit-viewer) to implement the workflow. - Add a "Back" buttom to header and bind click event to go back the perspective viewer @@ -478,7 +478,7 @@ To review and edit the captured images, we create an edit viewer. ```javascript perspectiveViewer.on("showEditViewer",() => { switchViewer(0,0,1) - }); + }); ``` - Register an event in `perspectiveViewer` to go back the capture viewer. @@ -486,7 +486,7 @@ To review and edit the captured images, we create an edit viewer. ```javascript perspectiveViewer.on("backToCaptureViewer",() => { switchViewer(1,0,0); - }); + }); ``` - Register an event in `editViewer` to go back the perspective viewer. @@ -494,7 +494,7 @@ To review and edit the captured images, we create an edit viewer. ```javascript editViewer.on("backToPerspectiveViewer",() => { switchViewer(0,1,0); - }); + }); ``` ## Review the complete code @@ -572,8 +572,8 @@ To review and edit the captured images, we create an edit viewer. // Bind click event to "ImagePreview" element // The event will be registered later type: Dynamsoft.DDV.Elements.ImagePreview, - events: { - click: "showPerspectiveViewer" + events: { + click: "showPerspectiveViewer" }, }, Dynamsoft.DDV.Elements.CameraConvert, @@ -606,7 +606,7 @@ To review and edit the captured images, we create an edit viewer. type: Dynamsoft.DDV.Elements.Layout, className: "ddv-perspective-viewer-header-mobile", children: [ - { + { // Add a "Back" button in perspective viewer's header and bind the event to go back to capture viewer // The event will be registered later type: Dynamsoft.DDV.Elements.Button, @@ -689,7 +689,7 @@ To review and edit the captured images, we create an edit viewer. ], }, ], - }; + }; // Create an edit viewer const editViewer = new Dynamsoft.DDV.EditViewer({ @@ -706,17 +706,17 @@ To review and edit the captured images, we create an edit viewer. // Register an event in `perspectiveViewer` to show the edit viewer perspectiveViewer.on("showEditViewer",() => { switchViewer(0,0,1) - }); + }); // Register an event in `perspectiveViewer` to go back the capture viewer perspectiveViewer.on("backToCaptureViewer",() => { switchViewer(1,0,0); - }); + }); // Register an event in `editViewer` to go back the perspective viewer editViewer.on("backToPerspectiveViewer",() => { switchViewer(0,1,0); - }); + }); // Control viewers' visibility. function switchViewer(capture, perspective, edit) { @@ -751,4 +751,4 @@ Sometimes, you may want to add some auxiliary text to icons to show better user ### Refer to -- [Customize Elements' Display Text](https://www.dynamsoft.com/document-viewer/docs/ui/customize/elements.html#display-text) \ No newline at end of file +- [Customize Elements' Display Text](https://www.dynamsoft.com/document-viewer/docs/ui/customize/elements.html#display-text) diff --git a/codegallery/usecase/review-adjust-detected-boundaries-v1.1.md b/codegallery/usecase/review-adjust-detected-boundaries-v1.1.md index 1d86569..ea788c2 100644 --- a/codegallery/usecase/review-adjust-detected-boundaries-v1.1.md +++ b/codegallery/usecase/review-adjust-detected-boundaries-v1.1.md @@ -35,7 +35,7 @@ Since this sample is based on HelloWorld, the basic steps are introduced in [Cre type: Dynamsoft.DDV.Elements.Layout, className: "ddv-perspective-viewer-header-mobile", children: [ - { + { // Add a "Back" button in perspective viewer's header and bind the event to go back to the capture viewer // The event will be registered later type: Dynamsoft.DDV.Elements.Button, @@ -242,7 +242,7 @@ document.getElementById("restore").onclick = () => { } }); // Play video stream in 1080P - captureViewer.play({ + captureViewer.play({ resolution: [1920,1080], fill: true }); @@ -260,7 +260,7 @@ document.getElementById("restore").onclick = () => { type: Dynamsoft.DDV.Elements.Layout, className: "ddv-perspective-viewer-header-mobile", children: [ - { + { // Add a "Back" button in perspective viewer's header and bind the event // The event will be registered later type: Dynamsoft.DDV.Elements.Button, @@ -317,7 +317,7 @@ document.getElementById("restore").onclick = () => { viewerConfig:{ scrollToLatest: true, } - }); + }); // Register the event for "Back" button perspectiveViewer.on("backToCaptureViewer",() => { @@ -332,7 +332,7 @@ document.getElementById("restore").onclick = () => { if(count === 0) { switchViewer(true,false) } - }); + }); // Register the event for "PerspectiveAll" button to display the result image perspectiveViewer.on("done", async () => { @@ -388,4 +388,4 @@ Sometimes, you may want to add some auxiliary text to icons to show better user ### Refer to -- [Customize Elements' Display Text](https://www.dynamsoft.com/document-viewer/docs/ui/customize/elements.html#display-text) \ No newline at end of file +- [Customize Elements' Display Text](https://www.dynamsoft.com/document-viewer/docs/ui/customize/elements.html#display-text) diff --git a/faq.md b/faq.md index b4cf962..0440b04 100644 --- a/faq.md +++ b/faq.md @@ -5,4 +5,3 @@ description: This is the FAQ page of Mobile Web Capture. keywords: faq needAutoGenerateSidebar: true --- - diff --git a/gettingstarted/adddependency-v1.1.md b/gettingstarted/adddependency-v1.1.md index 3f267dc..8f47c40 100644 --- a/gettingstarted/adddependency-v1.1.md +++ b/gettingstarted/adddependency-v1.1.md @@ -109,7 +109,7 @@ If you would like to use the SDKs completely offline, please refer to [Use your ## Specify the location of the engine files -This is usually only required with frameworks like Angular or React, etc. where the referenced JavaScript files such as cvr.js, ddn.js are compiled into another file, or hosting the engine files and using the SDKs completely offline. The purpose is to tell the SDK where to find the engine files (*.worker.js, *.wasm.js and *.wasm, etc.). +This is usually only required with frameworks like Angular or React, etc. where the referenced JavaScript files such as cvr.js, ddn.js are compiled into another file, or hosting the engine files and using the SDKs completely offline. The purpose is to tell the SDK where to find the engine files (*.worker.js, *.wasm.js and *.wasm, etc.). ### Use the jsDelivr CDN with frameworks like Angular or React, etc. ```typescript @@ -133,4 +133,4 @@ This is usually only required with frameworks like Angular or React, etc. where Dynamsoft.Core.CoreModule.engineResourcePaths.cvr = "./node_modules/dynamsoft-capture-vision-router/dist/"; Dynamsoft.Core.CoreModule.engineResourcePaths.std = "./node_modules/dynamsoft-capture-vision-std/dist/"; Dynamsoft.Core.CoreModule.engineResourcePaths.dip = "./node_modules/dynamsoft-image-processing/dist/"; - ``` \ No newline at end of file + ``` diff --git a/gettingstarted/adddependency.md b/gettingstarted/adddependency.md index 30aa3af..96f6904 100644 --- a/gettingstarted/adddependency.md +++ b/gettingstarted/adddependency.md @@ -143,4 +143,3 @@ This is usually only required with frameworks like Angular or React, etc. where Dynamsoft.Core.CoreModule.engineResourcePaths.dip = "./node_modules/dynamsoft-image-processing/dist/"; Dynamsoft.Core.CoreModule.engineResourcePaths.dce = "./node_modules/dynamsoft-camera-enhancer/dist/"; ``` - \ No newline at end of file diff --git a/gettingstarted/helloworld-continuousmode.md b/gettingstarted/helloworld-continuousmode.md index 4d58674..3016fd1 100644 --- a/gettingstarted/helloworld-continuousmode.md +++ b/gettingstarted/helloworld-continuousmode.md @@ -161,12 +161,12 @@ export async function initDocDetectModule(DDV, CVR) { success: false }); }; - + let width = image.width; let height = image.height; let ratio = 1; let data; - + if (height > 720) { ratio = height / 720; height = 720; @@ -175,8 +175,8 @@ export async function initDocDetectModule(DDV, CVR) { } else { data = image.data.slice(0); } - - + + // Define DSImage according to the usage of DDN const DSImage = { bytes: new Uint8Array(data), @@ -185,33 +185,33 @@ export async function initDocDetectModule(DDV, CVR) { stride: width * 4, //RGBA format: 10 // IPF_ABGR_8888 }; - + // Use DDN normalized module const results = await router.capture(DSImage, 'detect-document-boundaries'); - + // Filter the results and generate corresponding return values if (results.items.length <= 0) { return Promise.resolve({ success: false }); }; - + const quad = []; results.items[0].location.points.forEach((p) => { quad.push([p.x * ratio, p.y * ratio]); }); - + const detectResult = this.processDetectResult({ location: quad, width: image.width, height: image.height, config }); - + return Promise.resolve(detectResult); } } - + DDV.setProcessingHandler('documentBoundariesDetect', new DDNNormalizeHandler()) } @@ -228,42 +228,42 @@ function compress( } catch (error) { source = new Uint8Array(imageData); } - + const scaleW = newWidth / imageWidth; const scaleH = newHeight / imageHeight; const targetSize = newWidth * newHeight * 4; const targetMemory = new ArrayBuffer(targetSize); let distData = null; - + try { distData = new Uint8ClampedArray(targetMemory, 0, targetSize); } catch (error) { distData = new Uint8Array(targetMemory, 0, targetSize); } - + const filter = (distCol, distRow) => { const srcCol = Math.min(imageWidth - 1, distCol / scaleW); const srcRow = Math.min(imageHeight - 1, distRow / scaleH); const intCol = Math.floor(srcCol); const intRow = Math.floor(srcRow); - + let distI = (distRow * newWidth) + distCol; let srcI = (intRow * imageWidth) + intCol; - + distI *= 4; srcI *= 4; - + for (let j = 0; j <= 3; j += 1) { distData[distI + j] = source[srcI + j]; } }; - + for (let col = 0; col < newWidth; col += 1) { for (let row = 0; row < newHeight; row += 1) { filter(col, row); } } - + return distData; } ``` @@ -307,11 +307,11 @@ To capture images, we need to create a capture viewer. type: Dynamsoft.DDV.Elements.Capture, className: "ddv-capture-viewer-captureButton", }, - { + { // Bind click event to "ImagePreview" element // The event will be registered later. type: Dynamsoft.DDV.Elements.ImagePreview, - events:{ + events:{ click: "showEditViewer", } }, @@ -321,7 +321,7 @@ To capture images, we need to create a capture viewer. ], }; ``` - + - Create the viewer by using the new `UiConfig`. ```javascript @@ -357,7 +357,7 @@ To review and edit the captured images, we create an edit viewer. type: Dynamsoft.DDV.Elements.Layout, className: "ddv-edit-viewer-header-mobile", children: [ - { + { // Add a "Back" button to header and bind click event to go back the capture viewer // The event will be registered later type: Dynamsoft.DDV.Elements.Button, @@ -430,7 +430,7 @@ To review and edit the captured images, we create an edit viewer. children: [ Dynamsoft.DDV.Elements.Blank, Dynamsoft.DDV.Elements.Pagination, - { + { // Bind event for "PerspectiveAll" button to show the edit viewer // The event will be registered later. type: Dynamsoft.DDV.Elements.PerspectiveAll, @@ -589,11 +589,11 @@ Since the workflow in this sample is very simple, only the four events mentioned type: Dynamsoft.DDV.Elements.Capture, className: "ddv-capture-viewer-captureButton", }, - { + { // Bind click event to "ImagePreview" element // The event will be registered later. type: Dynamsoft.DDV.Elements.ImagePreview, - events:{ + events:{ click: "showEditViewer", } }, @@ -628,7 +628,7 @@ Since the workflow in this sample is very simple, only the four events mentioned type: Dynamsoft.DDV.Elements.Layout, className: "ddv-edit-viewer-header-mobile", children: [ - { + { // Add a "Back" button to header and bind click event to go back the capture viewer // The event will be registered later type: Dynamsoft.DDV.Elements.Button, @@ -687,7 +687,7 @@ Since the workflow in this sample is very simple, only the four events mentioned children: [ Dynamsoft.DDV.Elements.Blank, Dynamsoft.DDV.Elements.Pagination, - { + { // Bind event for "PerspectiveAll" button to show the edit viewer // The event will be registered later. type: Dynamsoft.DDV.Elements.PerspectiveAll, @@ -715,7 +715,7 @@ Since the workflow in this sample is very simple, only the four events mentioned // Create an perspective viewer const perspectiveViewer = new Dynamsoft.DDV.PerspectiveViewer({ container: "container", - groupUid: captureViewer.groupUid, // Data sync with the capture viewer + groupUid: captureViewer.groupUid, // Data sync with the capture viewer uiConfig: newPerspectiveUiConfig, }); @@ -766,4 +766,4 @@ Sometimes, you may want to add some auxiliary text to icons to show better user ### Refer to -- [Customize Elements' Display Text](https://www.dynamsoft.com/document-viewer/docs/ui/customize/elements.html#display-text) \ No newline at end of file +- [Customize Elements' Display Text](https://www.dynamsoft.com/document-viewer/docs/ui/customize/elements.html#display-text) diff --git a/gettingstarted/helloworld-singlepage.md b/gettingstarted/helloworld-singlepage.md index 01c870c..b432d82 100644 --- a/gettingstarted/helloworld-singlepage.md +++ b/gettingstarted/helloworld-singlepage.md @@ -608,4 +608,4 @@ We provide some samples which demonstrate the popular use cases, for example, re Please refer to the [Use Case]({{ site.codegallery }}usecases/index.html) section. -## [Demo](https://demo.dynamsoft.com/mobile-web-capture/) \ No newline at end of file +## [Demo](https://demo.dynamsoft.com/mobile-web-capture/) diff --git a/gettingstarted/helloworld-v1.1.md b/gettingstarted/helloworld-v1.1.md index b0c4c92..ba2a436 100644 --- a/gettingstarted/helloworld-v1.1.md +++ b/gettingstarted/helloworld-v1.1.md @@ -169,12 +169,12 @@ export async function initDocDetectModule(DDV, CVR) { success: false }); }; - + let width = image.width; let height = image.height; let ratio = 1; let data; - + if (height > 720) { ratio = height / 720; height = 720; @@ -183,8 +183,8 @@ export async function initDocDetectModule(DDV, CVR) { } else { data = image.data.slice(0); } - - + + // Define DSImage according to the usage of DDN const DSImage = { bytes: new Uint8Array(data), @@ -193,33 +193,33 @@ export async function initDocDetectModule(DDV, CVR) { stride: width * 4, //RGBA format: 10 // IPF_ABGR_8888 }; - + // Use DDN normalized module const results = await router.capture(DSImage, 'detect-document-boundaries'); - + // Filter the results and generate corresponding return values if (results.items.length <= 0) { return Promise.resolve({ success: false }); }; - + const quad = []; results.items[0].location.points.forEach((p) => { quad.push([p.x * ratio, p.y * ratio]); }); - + const detectResult = this.processDetectResult({ location: quad, width: image.width, height: image.height, config }); - + return Promise.resolve(detectResult); } } - + DDV.setProcessingHandler('documentBoundariesDetect', new DDNNormalizeHandler()) } @@ -236,42 +236,42 @@ function compress( } catch (error) { source = new Uint8Array(imageData); } - + const scaleW = newWidth / imageWidth; const scaleH = newHeight / imageHeight; const targetSize = newWidth * newHeight * 4; const targetMemory = new ArrayBuffer(targetSize); let distData = null; - + try { distData = new Uint8ClampedArray(targetMemory, 0, targetSize); } catch (error) { distData = new Uint8Array(targetMemory, 0, targetSize); } - + const filter = (distCol, distRow) => { const srcCol = Math.min(imageWidth - 1, distCol / scaleW); const srcRow = Math.min(imageHeight - 1, distRow / scaleH); const intCol = Math.floor(srcCol); const intRow = Math.floor(srcRow); - + let distI = (distRow * newWidth) + distCol; let srcI = (intRow * imageWidth) + intCol; - + distI *= 4; srcI *= 4; - + for (let j = 0; j <= 3; j += 1) { distData[distI + j] = source[srcI + j]; } }; - + for (let col = 0; col < newWidth; col += 1) { for (let row = 0; row < newHeight; row += 1) { filter(col, row); } } - + return distData; } ``` @@ -288,7 +288,7 @@ const captureViewer = new Dynamsoft.DDV.CaptureViewer({ } }); // Play video stream in 1080P -captureViewer.play({ +captureViewer.play({ resolution: [1920,1080], }); ``` @@ -301,9 +301,9 @@ Use the capture event to obtain the result image. captureViewer.on("captured", async (e) => { const pageData = await captureViewer.currentDocument.getPageData(e.pageUid); //Original image - document.getElementById("original").src = URL.createObjectURL(pageData.raw.data); + document.getElementById("original").src = URL.createObjectURL(pageData.raw.data); // Normalized image - document.getElementById("normalized").src = URL.createObjectURL(pageData.display.data); + document.getElementById("normalized").src = URL.createObjectURL(pageData.display.data); // Stop video stream and hide capture viewer's container captureViewer.stop(); document.getElementById("container").style.display = "none"; @@ -378,7 +378,7 @@ document.getElementById("restore").onclick = () => { } }); // Play video stream in 1080P - captureViewer.play({ + captureViewer.play({ resolution: [1920,1080], }); @@ -390,9 +390,9 @@ document.getElementById("restore").onclick = () => { const pageData = await captureViewer.currentDocument.getPageData(e.pageUid); // Original image - document.getElementById("original").src = URL.createObjectURL(pageData.raw.data); + document.getElementById("original").src = URL.createObjectURL(pageData.raw.data); // Normalized image - document.getElementById("normalized").src = URL.createObjectURL(pageData.display.data); + document.getElementById("normalized").src = URL.createObjectURL(pageData.display.data); }); // Restore Button function @@ -419,4 +419,4 @@ We provide some samples which demonstrate the popular use cases, for example, re Please refer to the [Use Case]({{ site.codegallery }}usecases/index.html) section. -## [Demo](https://demo.dynamsoft.com/mobile-web-capture/) \ No newline at end of file +## [Demo](https://demo.dynamsoft.com/mobile-web-capture/) diff --git a/gettingstarted/helloworld.md b/gettingstarted/helloworld.md index efbc198..0ce7e72 100644 --- a/gettingstarted/helloworld.md +++ b/gettingstarted/helloworld.md @@ -169,12 +169,12 @@ export async function initDocDetectModule(DDV, CVR) { success: false }); }; - + let width = image.width; let height = image.height; let ratio = 1; let data; - + if (height > 720) { ratio = height / 720; height = 720; @@ -183,8 +183,8 @@ export async function initDocDetectModule(DDV, CVR) { } else { data = image.data.slice(0); } - - + + // Define DSImage according to the usage of DDN const DSImage = { bytes: new Uint8Array(data), @@ -193,33 +193,33 @@ export async function initDocDetectModule(DDV, CVR) { stride: width * 4, //RGBA format: 10 // IPF_ABGR_8888 }; - + // Use DDN normalized module const results = await router.capture(DSImage, 'detect-document-boundaries'); - + // Filter the results and generate corresponding return values if (results.items.length <= 0) { return Promise.resolve({ success: false }); }; - + const quad = []; results.items[0].location.points.forEach((p) => { quad.push([p.x * ratio, p.y * ratio]); }); - + const detectResult = this.processDetectResult({ location: quad, width: image.width, height: image.height, config }); - + return Promise.resolve(detectResult); } } - + DDV.setProcessingHandler('documentBoundariesDetect', new DDNNormalizeHandler()) } @@ -236,42 +236,42 @@ function compress( } catch (error) { source = new Uint8Array(imageData); } - + const scaleW = newWidth / imageWidth; const scaleH = newHeight / imageHeight; const targetSize = newWidth * newHeight * 4; const targetMemory = new ArrayBuffer(targetSize); let distData = null; - + try { distData = new Uint8ClampedArray(targetMemory, 0, targetSize); } catch (error) { distData = new Uint8Array(targetMemory, 0, targetSize); } - + const filter = (distCol, distRow) => { const srcCol = Math.min(imageWidth - 1, distCol / scaleW); const srcRow = Math.min(imageHeight - 1, distRow / scaleH); const intCol = Math.floor(srcCol); const intRow = Math.floor(srcRow); - + let distI = (distRow * newWidth) + distCol; let srcI = (intRow * imageWidth) + intCol; - + distI *= 4; srcI *= 4; - + for (let j = 0; j <= 3; j += 1) { distData[distI + j] = source[srcI + j]; } }; - + for (let col = 0; col < newWidth; col += 1) { for (let row = 0; row < newHeight; row += 1) { filter(col, row); } } - + return distData; } ``` @@ -288,7 +288,7 @@ const captureViewer = new Dynamsoft.DDV.CaptureViewer({ } }); // Play video stream in 1080P -captureViewer.play({ +captureViewer.play({ resolution: [1920,1080], }); ``` @@ -301,9 +301,9 @@ Use the capture event to obtain the result image. captureViewer.on("captured", async (e) => { const pageData = await captureViewer.currentDocument.getPageData(e.pageUid); //Original image - document.getElementById("original").src = URL.createObjectURL(pageData.raw.data); + document.getElementById("original").src = URL.createObjectURL(pageData.raw.data); // Normalized image - document.getElementById("normalized").src = URL.createObjectURL(pageData.display.data); + document.getElementById("normalized").src = URL.createObjectURL(pageData.display.data); // Stop video stream and hide capture viewer's container captureViewer.stop(); document.getElementById("container").style.display = "none"; @@ -378,7 +378,7 @@ document.getElementById("restore").onclick = () => { } }); // Play video stream in 1080P - captureViewer.play({ + captureViewer.play({ resolution: [1920,1080], }); @@ -390,9 +390,9 @@ document.getElementById("restore").onclick = () => { const pageData = await captureViewer.currentDocument.getPageData(e.pageUid); // Original image - document.getElementById("original").src = URL.createObjectURL(pageData.raw.data); + document.getElementById("original").src = URL.createObjectURL(pageData.raw.data); // Normalized image - document.getElementById("normalized").src = URL.createObjectURL(pageData.display.data); + document.getElementById("normalized").src = URL.createObjectURL(pageData.display.data); }); // Restore Button function @@ -419,4 +419,4 @@ We provide some samples which demonstrate the popular use cases, for example, re Please refer to the [Use Case]({{ site.codegallery }}usecases/index.html) section. -## [Demo](https://demo.dynamsoft.com/mobile-web-capture/) \ No newline at end of file +## [Demo](https://demo.dynamsoft.com/mobile-web-capture/) diff --git a/gettingstarted/license.md b/gettingstarted/license.md index 47f10e0..b897f87 100644 --- a/gettingstarted/license.md +++ b/gettingstarted/license.md @@ -30,4 +30,4 @@ await Dynamsoft.License.LicenseManager.initLicense( "DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTEwMjQ5NjE5NyJ9", true ); // Public trial license which is valid for 24 hours -``` \ No newline at end of file +``` diff --git a/gettingstarted/systemrequirement.md b/gettingstarted/systemrequirement.md index ce0b9a0..f3bf378 100644 --- a/gettingstarted/systemrequirement.md +++ b/gettingstarted/systemrequirement.md @@ -17,10 +17,10 @@ As Mobile Web Capture solution is implemented by Dynamsoft Document Viewer and D - **Secure context (HTTPS deployment)** When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons - + - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction. > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test. - + - Dynamsoft License requires a secure context to work. - **`WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`** @@ -43,4 +43,4 @@ Apart from the browsers, the operating systems may impose some limitations of th ## Reference - [Dynamsoft Document Viewer - System Requirements](https://www.dynamsoft.com/document-viewer/docs/gettingstarted/sys_requirement.html) -- [Dynamsoft Document Normalizer - System Requirements](https://www.dynamsoft.com/document-normalizer/docs/web/programming/javascript/user-guide/index.html#system-requirements) \ No newline at end of file +- [Dynamsoft Document Normalizer - System Requirements](https://www.dynamsoft.com/document-normalizer/docs/web/programming/javascript/user-guide/index.html#system-requirements) diff --git a/guides/document-scanner-v3.0.md b/guides/document-scanner-v3.0.md index 8578249..ab72314 100644 --- a/guides/document-scanner-v3.0.md +++ b/guides/document-scanner-v3.0.md @@ -207,14 +207,14 @@ const result = await documentScanner.launch(); API Reference: [`launch()`](https://www.dynamsoft.com/mobile-web-capture/docs/api/document-scanner.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: +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. > 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`. -> +> > For Option 3: The `DocumentCorrectionView` step is skipped. Image correction is applied automatically, and the user is taken directly to `DocumentResultView`. In `DocumentResultView`, if needed, the user can return to `DocumentCorrectionView` to make additional adjustments or press "Re-take" to restart the scanning process. @@ -375,20 +375,20 @@ We previously covered `container` in [Workflow Customization](#workflow-customiz > 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`. -By default, `cameraEnhancerUIPath` points to a file hosted on the jsDelivr CDN: -[https://cdn.jsdelivr.net/npm/dynamsoft-document-scanner@1.1.1/dist/document-scanner.ui.html](https://cdn.jsdelivr.net/npm/dynamsoft-document-scanner@1.1.1/dist/document-scanner.ui.html). +By default, `cameraEnhancerUIPath` points to a file hosted on the jsDelivr CDN: +[https://cdn.jsdelivr.net/npm/dynamsoft-document-scanner@1.1.1/dist/document-scanner.ui.html](https://cdn.jsdelivr.net/npm/dynamsoft-document-scanner@1.1.1/dist/document-scanner.ui.html). 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**. -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`: +1. Follow the instructions in [Build from Source](#option-1-build-from-source) to obtain the source files for **DDS**. +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 ``` -4. Update the configuration to use the local file instead of the CDN version: +4. Update the configuration to use the local file instead of the CDN version: ```javascript const documentScanner = new Dynamsoft.DocumentScanner({ @@ -519,7 +519,7 @@ The `onDone` callback is triggered when the "Done" button is pressed. For exampl const documentScanner = new Dynamsoft.DocumentScanner({ license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key resultViewConfig: { - onDone: async (result) => + onDone: async (result) => { const canvas = result.correctedImageResult.toCanvas(); resultContainer.appendChild(canvas); @@ -529,7 +529,7 @@ const documentScanner = new Dynamsoft.DocumentScanner({ ``` ##### 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 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 following example demonstrates how to upload the result image to a server: diff --git a/guides/document-scanner.md b/guides/document-scanner.md index c73cadd..0286ee8 100644 --- a/guides/document-scanner.md +++ b/guides/document-scanner.md @@ -226,7 +226,7 @@ API Reference: - [`launch()`]({{ site.api }}document-scanner.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: +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. @@ -234,7 +234,7 @@ This step launches the user into the document scanning workflow, beginning in th > [!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`. -> +> > For Option 3: The `DocumentCorrectionView` step is skipped. Image correction is applied automatically, and the user is taken directly to `DocumentResultView`. In `DocumentResultView`, if needed, the user can return to `DocumentCorrectionView` to make additional adjustments or press "Re-take" to restart the scanning process. @@ -432,7 +432,7 @@ if (files.length) { 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, DDS will **only process the first page**. #### Example 5: Configure Scan Modes @@ -492,20 +492,20 @@ We previously covered `container` in [Workflow Customization](#workflow-customiz > [!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`. -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). +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). 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**. -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`: +1. Follow the instructions in [Build from Source](#option-1-build-from-source) to obtain the source files for **DDS**. +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 ``` -4. Update the configuration to use the local file instead of the CDN version: +4. Update the configuration to use the local file instead of the CDN version: ```javascript const documentScanner = new Dynamsoft.DocumentScanner({ @@ -706,7 +706,7 @@ The `onDone` callback is triggered when the "Done" button is pressed. For exampl const documentScanner = new Dynamsoft.DocumentScanner({ license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key resultViewConfig: { - onDone: async (result) => + onDone: async (result) => { const canvas = result.correctedImageResult.toCanvas(); resultContainer.appendChild(canvas); @@ -723,7 +723,7 @@ API Reference: ##### 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 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 following example demonstrates how to upload the result image to a server: diff --git a/guides/mobile-web-capture-customization-v3.0.md b/guides/mobile-web-capture-customization-v3.0.md index c7b3577..f6c22ad 100644 --- a/guides/mobile-web-capture-customization-v3.0.md +++ b/guides/mobile-web-capture-customization-v3.0.md @@ -4,13 +4,13 @@ needAutoGenerateSidebar: true needGenerateH3Content: true noTitleIndex: false title: Mobile Web Capture - Scan Multi-Page Documents -keywords: Documentation, Mobile Web Capture, Dynamsoft Document Scanner, +keywords: Documentation, Mobile Web Capture, Dynamsoft Document Scanner, description: Mobile Web Capture User Guide --- # How to Customize Mobile Web Capture -> **Prerequisites:** +> **Prerequisites:** > Read the [MWC Getting Started Guide](https://www.dynamsoft.com/mobile-web-capture/docs/guides/mobile-web-capture.html) before proceeding. This guide expands on the **Hello World** sample from the **MWC Getting Started Guide** and explores the available customization options. @@ -35,7 +35,7 @@ Keep TOC only for npm /github as readme - [Modify the Build Script](#modify-the-build-script) - [Build the Project](#build-the-project) - [Serve the Project Locally](#serve-the-project-locally) -- [Next Step](#next-step) +- [Next Step](#next-step) --> ## MobileWebCaptureConfig Overview @@ -137,24 +137,24 @@ 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]); } }; ``` -API Reference: +API Reference: - [`hasLaunched`](https://www.dynamsoft.com/mobile-web-capture/docs/api/mobile-web-capture.html#haslaunched) - [`dispose`](https://www.dynamsoft.com/mobile-web-capture/docs/api/mobile-web-capture.html#dispose) ### Scan Directly to Document -When **capturing** a document, it goes through three views: +When **capturing** a document, it goes through three views: -1. **`DocumentScannerView`** -2. **`DocumentCorrectionView`** (optional) -3. **`DocumentResultView`** (optional) +1. **`DocumentScannerView`** +2. **`DocumentCorrectionView`** (optional) +3. **`DocumentResultView`** (optional) The latter two views can be skipped to speed up the process. @@ -225,8 +225,8 @@ const mobileWebCapture = new Dynamsoft.MobileWebCapture({ ``` > ⚠ **IMPORTANT**: The **Upload** feature is enabled simultaneously in `DocumentView` and `PageView` (and in `LibraryView` if it is enabled). If this is not intended, you can hide the **Upload** button in these **Views**. -> Read more: -> 1. [Disable Upload in DocumentView](#example-2-disable-upload-in-documentview) +> Read more: +> 1. [Disable Upload in DocumentView](#example-2-disable-upload-in-documentview) > 2. [Disable Upload in PageView](#example-1-disable-upload-in-pageview) > 3. [Disable Upload in LibraryView](#example-2-disable-upload-in-libraryview) @@ -487,7 +487,7 @@ By default, **MWC** relies on a **CDN** for resources such as `.wasm` engine fil #### Update the Resource Paths -The following code modifies how resource files are referenced: +The following code modifies how resource files are referenced: > 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/). @@ -560,5 +560,3 @@ Now, all required files will be **served locally** without relying on a CDN. ## Next Step Start building your own mobile document capture and management solution with **MWC**! If you encounter any technical issues or have suggestions, feel free to [contact us](https://www.dynamsoft.com/company/contact/). - - diff --git a/guides/mobile-web-capture-customization.md b/guides/mobile-web-capture-customization.md index 840887d..7426124 100644 --- a/guides/mobile-web-capture-customization.md +++ b/guides/mobile-web-capture-customization.md @@ -4,13 +4,13 @@ needAutoGenerateSidebar: true needGenerateH3Content: true noTitleIndex: false title: Mobile Web Capture - Scan Multi-Page Documents -keywords: Documentation, Mobile Web Capture, Dynamsoft Document Scanner, +keywords: Documentation, Mobile Web Capture, Dynamsoft Document Scanner, description: Mobile Web Capture User Guide --- # How to Customize Mobile Web Capture -> [!TIP] +> [!TIP] > Prerequisites: read the [MWC Getting Started Guide]({{ site.guides }}mobile-web-capture.html) before proceeding. This guide expands on the **Hello World** sample from the **MWC Getting Started Guide** and explores the available customization options. @@ -35,7 +35,7 @@ Keep TOC only for npm /github as readme - [Modify the Build Script](#modify-the-build-script) - [Build the Project](#build-the-project) - [Serve the Project Locally](#serve-the-project-locally) -- [Next Step](#next-step) +- [Next Step](#next-step) --> ## MobileWebCaptureConfig Overview @@ -138,24 +138,24 @@ 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]); } }; ``` -API Reference: +API Reference: - [`hasLaunched`]({{ site.api }}mobile-web-capture.html#haslaunched) - [`dispose`]({{ site.api }}mobile-web-capture.html#dispose) ### Scan Directly to Document -When **capturing** a document, it goes through three views: +When **capturing** a document, it goes through three views: -1. **`DocumentScannerView`** -2. **`DocumentCorrectionView`** (optional) -3. **`DocumentResultView`** (optional) +1. **`DocumentScannerView`** +2. **`DocumentCorrectionView`** (optional) +3. **`DocumentResultView`** (optional) The latter two views can be skipped to speed up the process. @@ -231,8 +231,8 @@ const mobileWebCapture = new Dynamsoft.MobileWebCapture({ > [!IMPORTANT] > The **Upload** feature is enabled simultaneously in `DocumentView` and `PageView` (and in `LibraryView` if it is enabled). If this is not intended, you can hide the **Upload** button in these **Views**. -> Read more: -> 1. [Disable Upload in DocumentView](#example-2-disable-upload-in-documentview) +> Read more: +> 1. [Disable Upload in DocumentView](#example-2-disable-upload-in-documentview) > 2. [Disable Upload in PageView](#example-1-disable-upload-in-pageview) > 3. [Disable Upload in LibraryView](#example-2-disable-upload-in-libraryview) @@ -499,7 +499,7 @@ By default, **MWC** relies on a **CDN** for resources such as `.wasm` engine fil #### Update the Resource Paths -The following code modifies how resource files are referenced: +The following code modifies how resource files are referenced: > [!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/). @@ -572,5 +572,3 @@ Now, all required files will be **served locally** without relying on a CDN. ## Next Step Start building your own mobile document capture and management solution with **MWC**! If you encounter any technical issues or have suggestions, feel free to [contact us](https://www.dynamsoft.com/company/contact/). - - diff --git a/guides/mobile-web-capture-v3.0.md b/guides/mobile-web-capture-v3.0.md index 6e4ef00..7369fa7 100644 --- a/guides/mobile-web-capture-v3.0.md +++ b/guides/mobile-web-capture-v3.0.md @@ -4,14 +4,14 @@ needAutoGenerateSidebar: true needGenerateH3Content: true noTitleIndex: false title: Mobile Web Capture - Scan Multi-Page Documents -keywords: Documentation, Mobile Web Capture, Dynamsoft Document Scanner, +keywords: Documentation, Mobile Web Capture, Dynamsoft Document Scanner, description: Mobile Web Capture User Guide --- # Scan Multi-Page Documents with Mobile Web Capture > Prerequisites: -> +> > Read the [Introduction](https://www.dynamsoft.com/mobile-web-capture/docs/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. diff --git a/guides/mobile-web-capture.md b/guides/mobile-web-capture.md index 323cf41..f85f526 100644 --- a/guides/mobile-web-capture.md +++ b/guides/mobile-web-capture.md @@ -4,7 +4,7 @@ needAutoGenerateSidebar: true needGenerateH3Content: true noTitleIndex: false title: Mobile Web Capture - Scan Multi-Page Documents -keywords: Documentation, Mobile Web Capture, Dynamsoft Document Scanner, +keywords: Documentation, Mobile Web Capture, Dynamsoft Document Scanner, description: Mobile Web Capture User Guide --- diff --git a/index-v1.1.md b/index-v1.1.md index 23f44bc..6bf6339 100644 --- a/index-v1.1.md +++ b/index-v1.1.md @@ -21,4 +21,4 @@ description: Mobile Web Capture Documentation Homepage - [Detect boundaries on the existing images]({{ site.codegallery }}usecases/detect-boundaries-on-existing-images-v1.1.html) - [Related API reference]({{ site.api }}relatedapi.html) -- [Release notes]({{ site.releasenotes }}index.html) \ No newline at end of file +- [Release notes]({{ site.release-notes }}index.html) diff --git a/index.md b/index.md index 2fe96f1..b471a2b 100644 --- a/index.md +++ b/index.md @@ -15,4 +15,4 @@ description: Mobile Web Capture Documentation Homepage - [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.releasenotes }}index.html) \ No newline at end of file +- [Release notes]({{ site.release-notes }}mobile-web-capture.html) diff --git a/introduction/index-v3.0.md b/introduction/index-v3.0.md index 328c8a1..c92a2ed 100644 --- a/introduction/index-v3.0.md +++ b/introduction/index-v3.0.md @@ -51,7 +51,7 @@ In short, for scenarios requiring **document management beyond single-page captu | Export multi-page documents as PDFs with options for selected pages, one or multiple full documents | | ✓ | > 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. ## Design Principles diff --git a/introduction/index.md b/introduction/index.md index e44e373..cb7dd67 100644 --- a/introduction/index.md +++ b/introduction/index.md @@ -53,7 +53,7 @@ In short, for scenarios requiring **document management beyond single-page captu > [!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. ## Design Principles diff --git a/release-notes/mobile-web-capture.md b/release-notes/mobile-web-capture.md index 9eee50d..cf8f214 100644 --- a/release-notes/mobile-web-capture.md +++ b/release-notes/mobile-web-capture.md @@ -15,7 +15,7 @@ permalink: /release-notes/mobile-web-capture.html ## 3.1.0 (05/01/2025) The most notable improvement in this version is the pluggable scanner feature. This allows MWC to integrate any custom scanner. - + ### Features 1. Add Pluggable Scanner feature which integrates any scanner satisfying the following: @@ -51,7 +51,7 @@ In this release, **Mobile Web Capture (MWC)** has been completely redesigned fro - Full suite of PDF annotation and editing tools - Upload documents to a server or save them locally - Ready-to-use and flexible document scanning workflow -- Modular, view-based design for easy maintenance and customization +- Modular, view-based design for easy maintenance and customization ### Views @@ -116,4 +116,4 @@ Includes Includes - [Dynamsoft Document Viewer Javascript Edition 1.0.0](https://www.dynamsoft.com/document-viewer/docs/releasenotes/index.html#100-12262023) -- [Dynamsoft Document Normalizer Javascript Edition 2.0.11](https://www.dynamsoft.com/document-normalizer/docs/web/programming/javascript/release-notes/javascript-2.html#2011-08242023) \ No newline at end of file +- [Dynamsoft Document Normalizer Javascript Edition 2.0.11](https://www.dynamsoft.com/document-normalizer/docs/web/programming/javascript/release-notes/javascript-2.html#2011-08242023) diff --git a/search.md b/search.md index 1b13527..1b02129 100644 --- a/search.md +++ b/search.md @@ -3,4 +3,4 @@ layout: search-page title: Mobile Web Capture Documentation Search keywords: Mobile Web Capture Documentation Search cx: 912cbb35fff874a8d ---- \ No newline at end of file +--- diff --git a/web.config b/web.config index 554cc5f..27b0548 100644 --- a/web.config +++ b/web.config @@ -1,46 +1,46 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 6f62f41d6b061cdb98dc9e3fc50e957bd5c95667 Mon Sep 17 00:00:00 2001 From: h-dynamsoft <172081603+dynamsoft-h@users.noreply.github.com> Date: Mon, 16 Jun 2025 17:09:02 -0700 Subject: [PATCH 02/10] Staging (#98) - Clean up repo - Fix GitHub actions - Fix formatting and syntax - Add MWC framework sample and link --------- Co-authored-by: Tom Kent --- .github/workflows/main.yml | 6 +++--- _config.yml | 1 + _data/full_tree.yml | 1 + _includes/sidelist-code-gallery.html | 5 +++++ _includes/sidelist-full-tree-v2.0.html | 10 +++++----- _includes/sidelist-full-tree.html | 4 +--- code-gallery/frameworks.md | 26 ++++++++++++++++++++++++++ index.md | 2 ++ introduction/index.md | 2 +- 9 files changed, 45 insertions(+), 12 deletions(-) create mode 100644 _includes/sidelist-code-gallery.html create mode 100644 code-gallery/frameworks.md diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 9137b0c..8652116 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -4,11 +4,11 @@ name: CI # Controls when the workflow will run on: - # Triggers the workflow on push events but only for the master branch + # Triggers the workflow on push events to the main and preview branches push: branches: - main - # - preview + - preview # Allows you to run this workflow manually from the Actions tab workflow_dispatch: @@ -26,7 +26,7 @@ jobs: Build-Preview: if: ${{ github.ref == 'refs/heads/preview' }} - uses: dynamsoft-docs/Docs-Template-Repo/.github/workflows/called-workflow-build-sync-testing.yml@preview + uses: dynamsoft-docs/Docs-Template-Repo/.github/workflows/called-workflow-build-sync-testing.yml@main with: doc-repo: mobile-web-capture-docs doc-url: mobile-web-capture/docs/ diff --git a/_config.yml b/_config.yml index fe0b774..279c87d 100644 --- a/_config.yml +++ b/_config.yml @@ -7,6 +7,7 @@ docHomePage: /mobile-web-capture/docs/introduction/ introduction: /mobile-web-capture/docs/introduction/ gettingstarted: /mobile-web-capture/docs/gettingstarted/ codegallery: /mobile-web-capture/docs/codegallery/ +code-gallery: /mobile-web-capture/docs/code-gallery/ api: /mobile-web-capture/docs/api/ guides: /mobile-web-capture/docs/guides/ diff --git a/_data/full_tree.yml b/_data/full_tree.yml index 0612ff8..68b8773 100644 --- a/_data/full_tree.yml +++ b/_data/full_tree.yml @@ -1,6 +1,7 @@ tree_file_list: - sidelist-introduction.html - sidelist-guides.html + - sidelist-code-gallery.html - sidelist-api.html - sidelist-release-notes.html - sidelist-full-tree.html diff --git a/_includes/sidelist-code-gallery.html b/_includes/sidelist-code-gallery.html new file mode 100644 index 0000000..afa9ce1 --- /dev/null +++ b/_includes/sidelist-code-gallery.html @@ -0,0 +1,5 @@ +
  • Code Gallery + +
    • diff --git a/_includes/sidelist-full-tree-v2.0.html b/_includes/sidelist-full-tree-v2.0.html index 0fd0efc..eea1dd9 100644 --- a/_includes/sidelist-full-tree-v2.0.html +++ b/_includes/sidelist-full-tree-v2.0.html @@ -1,5 +1,5 @@ -{%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-introduction.html" -%} -{%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-gettingstarted.html" -%} -{%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-codegallery.html" -%} -{%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-apis.html" -%} -{%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-release-notes.html" -%} +{%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-introduction-v2.0.html" -%} +{%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-gettingstarted-v2.0.html" -%} +{%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-codegallery-v2.0.html" -%} +{%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-apis-v2.0.html" -%} +{%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-release-notes-v2.0.html" -%} diff --git a/_includes/sidelist-full-tree.html b/_includes/sidelist-full-tree.html index 241f2ba..e75dce5 100644 --- a/_includes/sidelist-full-tree.html +++ b/_includes/sidelist-full-tree.html @@ -1,7 +1,5 @@ {%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-introduction.html" -%} {%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-guides.html" -%} - - +{%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-code-gallery.html" -%} {%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-api.html" -%} - {%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-release-notes.html" -%} diff --git a/code-gallery/frameworks.md b/code-gallery/frameworks.md new file mode 100644 index 0000000..59da7b1 --- /dev/null +++ b/code-gallery/frameworks.md @@ -0,0 +1,26 @@ +--- +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 +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. + +> [!NOTE] +> Please [contact us](https://www.dynamsoft.com/company/contact/) for any inquiries about currently unsupported frameworks. + +## Web Framework Samples + +We host samples with Hello World implementations of DDS and MWC on GitHub, in the same repository as the source code for the SDKs. Follow the README contained in the directory of each sample for instructions to build and serve the sample: + +### Mobile Web Capture + +- [Angular](https://github.com/Dynamsoft/mobile-web-capture/tree/master/samples/frameworks/angular) diff --git a/index.md b/index.md index b471a2b..2df89c3 100644 --- a/index.md +++ b/index.md @@ -12,6 +12,8 @@ description: Mobile Web Capture Documentation Homepage - [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) +- 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) diff --git a/introduction/index.md b/introduction/index.md index cb7dd67..3ae7693 100644 --- a/introduction/index.md +++ b/introduction/index.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. From 81a1497cfa48a8072efe3d5b93a762954334c005 Mon Sep 17 00:00:00 2001 From: h-dynamsoft <172081603+dynamsoft-h@users.noreply.github.com> Date: Tue, 17 Jun 2025 14:32:07 -0700 Subject: [PATCH 03/10] Add MWC react and vue samples (#100) * chore: remove VS Code config * chore: update .gitignore for local builds * chore: fix .gitignore * chore: fix .gitignore * remove ignored templates * chore: fix whitespace and EOF newline * chore: fix .gitignore * chore: remove extra .editorconfig * fix: release notes linking * fix: rename release notes sidelist * fix: rename release notes sidelist * chore: use main branch Docs-Template-Repo for preview CI * fix: allow preview CI on push to preview branch * add: code gallery and web framework samples * fix: MWC v2.0 sidelist * fix: code gallery links * fix: web framework links * sample: add MWC react and vue samples --------- Co-authored-by: Tom Kent --- code-gallery/frameworks.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/code-gallery/frameworks.md b/code-gallery/frameworks.md index 59da7b1..af00f05 100644 --- a/code-gallery/frameworks.md +++ b/code-gallery/frameworks.md @@ -24,3 +24,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) \ No newline at end of file From ea6d2da3d8111ec83890fb35af4f6ef61e1f0f49 Mon Sep 17 00:00:00 2001 From: h-dynamsoft <172081603+dynamsoft-h@users.noreply.github.com> Date: Mon, 23 Jun 2025 17:24:45 -0700 Subject: [PATCH 04/10] Staging (#102) * chore: remove VS Code config * chore: update .gitignore for local builds * chore: fix .gitignore * chore: fix .gitignore * remove ignored templates * chore: fix whitespace and EOF newline * chore: fix .gitignore * chore: remove extra .editorconfig * fix: release notes linking * fix: rename release notes sidelist * fix: rename release notes sidelist * chore: use main branch Docs-Template-Repo for preview CI * fix: allow preview CI on push to preview branch * add: code gallery and web framework samples * fix: MWC v2.0 sidelist * fix: code gallery links * fix: web framework links * sample: add MWC react and vue samples * fix: EOF newline * feat: self hosted DDS resources option * fix: syntax * add: more self hosting DDS resources instructions * chore: remove old DDS self hosting section * fix: DDS resources info * feat: multi-panel DDS hello world * feat: multi-panel DDS hello world * chore: fixes * add: DDS release notes --- guides/document-scanner.md | 252 +++++++++++++++++------------- release-notes/document-scanner.md | 149 ++++++++++++++++++ 2 files changed, 295 insertions(+), 106 deletions(-) diff --git a/guides/document-scanner.md b/guides/document-scanner.md index 0286ee8..3e8f7ad 100644 --- a/guides/document-scanner.md +++ b/guides/document-scanner.md @@ -13,12 +13,12 @@ description: Dynamsoft Document Scanner User Guide > [!TIP] > Prerequisite: Read the [Introduction]({{ site.introduction }}index.html) before proceeding. -**Dynamsoft Document Scanner (DDS)** is an SDK designed for scanning single-page documents. It not only captures images of the documents but also enhances their quality to professional standards, making it an ideal tool for mobile document scanning. +**Dynamsoft Document Scanner (DDS)** is an SDK designed for scanning single-page documents. DDS captures images of the documents and also enhances their quality to professional standards, making it an ideal tool for mobile document scanning. > [!NOTE] > See it in action with the [Dynamsoft Document Scanner Demo](https://demo.dynamsoft.com/document-scanner/). -This guide walks you through building a web application that scans single-page documents using **DDS**, with pre-defined configurations. +This guide walks you through building a web application that scans single-page documents using **DDS** with pre-defined configurations. ## 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 **DDS**, you can request one here: {% include trialLicense.html %} - The trial license can be renewed twice, offering a total of two months of free access. + The trial license can be renewed twice for 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. @@ -67,10 +67,16 @@ The first step in using **DDS** is to obtain its library files. You can acquire 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 DDS and its dependencies on your web server. -### Option 1: Build from Source +
    + +
    +
    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: @@ -99,9 +105,14 @@ Once the server is running, open the application in a browser using the address > [!TIP] > See the server configuration details in [`/dev-server/index.js`](https://github.com/Dynamsoft/document-scanner-javascript/blob/main/dev-server/index.js). -### 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. +### Use Precompiled Script + +We publish **DDS** 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 ` -``` - -Below is the complete Hello World sample page that uses this precompiled script from a CDN. - -> [!TIP] -> The code is identical to the [`/samples/hello-world.html`](https://github.com/Dynamsoft/document-scanner-javascript/blob/main/samples/hello-world.html) file mentioned in the [Build from Source](#option-1-build-from-source) section, except for the script source. - -> [!WARNING] -> **Remember** to replace `"YOUR_LICENSE_KEY_HERE"` with your actual license key. - -```html - - - - - - Dynamsoft Document Scanner - Hello World - - - -

    Dynamsoft Document Scanner

    -
    - - - -``` - -To run the sample, create a new file called `hello-world.html`, then copy and paste the code above into the file. Next, serve the page directly by deploying it to a server. - -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 skip those here for brevity. - -
    - -
    -
    Self-Host Resources
    - -### Self-Host Resources - -By default, the DDS 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. There are two options: - -1. GitHub: go to the official [Github repository](https://github.com/Dynamsoft/mrz-scanner-javascript), and follow steps 1 through 4 in [*build from source*](document-scanner#option-1-build-from-source). -2. `npm`: Install the DDS package through NPM using the command `npm i dynamsoft-document-scanner@1.2.0 -E`. - -#### Point to Resources - -The library uses [`engineResourcePaths`]({{ site.api }}document-scanner.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 DDS 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 }}document-scanner.html#documentscanner) -- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig) -- [`DocumentScannerViewConfig`]({{ site.api }}document-scanner.html#documentscannerviewconfig) -- [`engineResourcePaths`]({{ site.api }}document-scanner.html#engineresourcepaths) -- [`cameraEnhancerUIPath`]({{ site.api }}document-scanner.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: - -```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. - -#### 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 - -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). - -### Reference DDS - -```html - - - - - - Dynamsoft Document Scanner - Hello World - - - -``` - -In this step, DDS is referenced using a relative local path in the `` section of the HTML. - -```html - -``` - -Alternatively, the script can be referenced from a CDN: - -```html - -``` - -**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. - -> [!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-Host Resources](#self-host-resources). - -### Instantiate DDS - -```javascript -const documentScanner = new Dynamsoft.DocumentScanner({ - license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key -}); -``` - -API Reference: - -- [`DocumentScanner()`]({{ site.api }}document-scanner.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). - -> [!WARNING] -> Instantiating the `DocumentScanner` requires a valid license key. - -### Launch DDS - -```javascript -const result = await documentScanner.launch(); -``` - -API Reference: - -- [`launch()`]({{ site.api }}document-scanner.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. - -> [!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`. -> -> For Option 3: The `DocumentCorrectionView` step is skipped. Image correction is applied automatically, and the user is taken directly to `DocumentResultView`. - -In `DocumentResultView`, if needed, the user can return to `DocumentCorrectionView` to make additional adjustments or press "Re-take" to restart the scanning process. - -### Display the Result - -The workflow returns a scanned image object of type `CorrectedImageResult`. To display the scanned `result` image, we use a `
    ` in the ``: - -```html - -

    Dynamsoft Document Scanner

    -
    -``` - -API Reference: - -- [`DocumentResult`]({{ site.api }}document-scanner.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); -} else { - 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. - -### `DocumentScannerConfig` Overview - -[`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig) is the primary configuration object for customizing **DDS**. 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. -3. `showCorrectionView`: Configures whether or not to show `DocumentCorrectionView`. -4. `showResultView`: Configures whether or not to show `DocumentResultView`. -5. `scannerViewConfig`: Configures the main scanner view with the following properties: - 1. `container`: The HTML container for the `DocumentScannerView`. - 2. `cameraEnhancerUIPath`: Path to the UI definition file (.html) for the `DocumentScannerView`. - 3. `enableAutoCropMode`: sets the default Auto-Crop mode. - 4. `enableSmartCaptureMode`: sets the default Smart Capture mode. - 5. `scanRegion`: sets the scan region within the viewfinder for document scanning. - 6. `minVerifiedFramesForSmartCapture`: sets minimum number of camera frames to detect document boundaries on Smart Capture mode. - 7. `showSubfooter`: sets the visibility of the mode selector menu. - 8. `showPoweredByDynamsoft`: sets the visibility of the Dynamsoft branding message. -6. `correctionViewConfig`: Configures the document correction view. - 1. `container`: The HTML container for the `DocumentCorrectionView`. - 2. `toolbarButtonsConfig`: Configures the appearance and labels of the buttons for the `DocumentCorrectionView` UI. - 3. `onFinish`: Handler called when the user clicks the "Apply" button. -7. `resultViewConfig`: Configures the result view with the following properties: - 1. `container`: The HTML container for the `DocumentResultView`. - 2. `toolbarButtonsConfig`: Configures the appearance and labels of the buttons for the `DocumentResultView` UI. - 3. `onDone`: Handler called when the user clicks the "Done" button. - 4. `onUpload`: Handler called when the user clicks the "Upload" button. -8. `templateFilePath`: Path to a Capture Vision template for scanning configuration. Typically not needed as the default template is used. -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`: - -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. - -```javascript -const documentScanner = new Dynamsoft.DocumentScanner({ - license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key - // Add more arguments -}); -``` - -### Workflow Customization - -In the Hello World sample, we use the complete workflow with minimum configuration: - -```javascript -const documentScanner = new Dynamsoft.DocumentScanner({ - 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 discuss a few ways to adjust the **DDS** workflow. - -#### Example 1: Confine DocumentScanner UI to a Specific Container - -As long as the `DocumentScanner` container is assigned, **DDS** confines its **Views** within that container. - -> [!NOTE] -> Containers assigned to its constituent **Views** will be ignored. - -```html -
    -``` - -```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 - } -}); -``` - -API Reference: - -- [`DocumentScanner()`]({{ site.api }}document-scanner.html#documentscanner) -- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig) - -#### Example 2: Only Show `DocumentScannerView` - -In some cases, `DocumentResultView` and `DocumentCorrectionView` may not be needed, so they can be hidden: - -```javascript -const documentScanner = new Dynamsoft.DocumentScanner({ - 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) - -#### Example 3: Specify Individual View Containers - -If only the `DocumentScannerView`, `DocumentResultView`, and `DocumentCorrectionView` containers are provided without the `DocumentScanner` container, **DDS** 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") - } -}); -``` - -API Reference: - -- [`DocumentScanner()`]({{ site.api }}document-scanner.html#documentscanner) -- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig) - -#### Example 4: Scan Static Image Directly - -To scan an image file directly without opening the Scanner View at all, you can pass a `File` object to `launch()`. As an example, select an image file from the local disk: - -```html - -``` - -Then get the input file as a `File` object, and pass that file object to `launch()` DDS with: - -```js -document.getElementById("initialFile").onchange = async function () { -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); - } else { - 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**. - -#### Example 5: Configure Scan Modes - -The Document Scanner View comes with three scan modes: - -1. Border Detection -2. Auto-Crop -3. Smart Capture - -By default, Border Detection mode is enabled upon entering the Scanner View, while the other two are turned off by default. The user can then enable them by clicking their respective icons in the scanning mode sub-footer. From the `DocumentScannerViewConfig` interface, you can: - -1. Set the default state of Auto-Crop mode with `enableAutoCropMode` -2. Set the default state of Smart Capture mode with `enableSmartCaptureMode` -3. Set the visibility of the scanning mode sub-footer with `showSubfooter` - -> [!NOTE] -> Border Detection Mode is always enabled upon the Scanner View, and the scanning sub-footer is visible by default. - -For example, the following config enables all three scanning modes and hides the scanning mode sub-footer to prevent the viewer from changing or viewing the scanning modes: - -```js -const documentScanner = new Dynamsoft.DocumentScanner({ - license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key - scannerViewConfig: { - enableAutoCropMode: true, - enableSmartCaptureMode: true, - false, -}}); -``` - -API Reference: - -- [`DocumentScanner()`]({{ site.api }}document-scanner.html#documentscanner) -- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig) -- [`DocumentScannerViewConfig`]({{ site.api }}document-scanner.html#documentscannerviewconfig) - -### View-Based Customization - -In addition to modifying the workflow, individual Views can be customized with configuration options for UI styling, button settings, and event handling. - -#### `DocumentScannerView` Configuration - -##### Customizing the `DocumentScannerView` UI - -Consider the following configuration interface used for customizing the `DocumentScannerView`: - -```javascript -interface DocumentScannerViewConfig { - container?: HTMLElement; - templateFilePath?: string; - cameraEnhancerUIPath?: string; -} -``` - -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`. - -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). - -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**. -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 - ``` -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 - }, - }); - ``` - -API Reference: - -- [`DocumentScanner()`]({{ site.api }}document-scanner.html#documentscanner) -- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig) -- [`DocumentScannerViewConfig`]({{ site.api }}document-scanner.html#documentscannerviewconfig) - -##### Customizing the Scanning Region - -We can customize the scanning region in the viewfinder with the `scanRegion` property in the configuration object: - -```js -interface ScanRegion { - ratio: { - width: number; - height: number; - }; - regionBottomMargin: number; // Bottom margin calculated in pixel - style: { - strokeWidth: number; - strokeColor: string; - }; -} -``` - -API Reference: - -[`ScanRegion`]({{ site.api }}document-scanner.html#scanregion) - -Here is how the scanning region is set: - -1. Use the `ratio` property to set the height-to-width of the rectangular scanning region, then scale the rectangle up to fit within the viewfinder. -2. Translate the rectangular up by the number of pixels specified by `regionBottomMargin`. -3. Create a visual border for the scanning region boundary on the viewfinder with a given stroke width in pixels, and a stroke color. - -For example: - -```js -scanRegion { - ratio: { - width: 2; - height: 3; - }; - regionBottomMargin: 20; - style: { - strokeWidth: 3; - strokeColor: "green"; - }; -} -``` - -This creates 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. - -#### `DocumentCorrectionView` Configuration - -Consider the following configuration interface used for customizing the `DocumentCorrectionView`: - -```javascript -interface DocumentCorrectionViewConfig { - container?: HTMLElement; - toolbarButtonsConfig?: DocumentCorrectionViewToolbarButtonsConfig; - onFinish?: (result: DocumentScanResult) => void; -} -``` - -`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: - -```javascript -type ToolbarButtonConfig = Pick; -interface DocumentCorrectionViewToolbarButtonsConfig { - fullImage?: ToolbarButtonConfig; - detectBorders?: ToolbarButtonConfig; - apply?: ToolbarButtonConfig; -} -``` - -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" - } - } - } -}); -``` - -API Reference: - -- [`DocumentScanner()`]({{ site.api }}document-scanner.html#documentscanner) -- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig) -- [`DocumentCorrectionViewConfig`]({{ site.api }}document-scanner.html#documentcorrectionviewconfig) - -##### Customizing Apply Button Callback - -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); - } - } -}); -``` - -API Reference: - -- [`DocumentScanner()`]({{ site.api }}document-scanner.html#documentscanner) -- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig) -- [`DocumentCorrectionViewConfig`]({{ site.api }}document-scanner.html#documentcorrectionviewconfig) - -#### `DocumentResultView` Configuration - -Consider the following configuration interface used for customizing the `DocumentResultView`: - -```javascript -interface DocumentResultViewConfig { - container?: HTMLElement; - toolbarButtonsConfig?: DocumentResultViewToolbarButtonsConfig; - onDone?: (result: DocumentResult) => Promise; - onUpload?: (result: DocumentResult) => Promise; -} -``` - -Like with `DocumentCorrectionView`, we'll look at `toolbarButtonsConfig`, `onDone` and `onUpload`. - -##### Styling Buttons - -The `toolbarButtonsConfig` property, of type `DocumentResultViewToolbarButtonsConfig`, customizes the appearance and functionality of the UI buttons. Here is its definition: - -```javascript -type ToolbarButtonConfig = Pick; -interface interface DocumentResultViewToolbarButtonsConfig { - retake?: ToolbarButtonConfig; - correct?: ToolbarButtonConfig; - share?: ToolbarButtonConfig; - upload?: ToolbarButtonConfig; - done?: ToolbarButtonConfig; -} -``` - -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 - } - } - } -}); -``` - -API Reference: - -- [`DocumentScanner()`]({{ site.api }}document-scanner.html#documentscanner) -- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig) -- [`DocumentResultViewConfig`]({{ site.api }}document-scanner.html#documentresultviewconfig) - -##### Customizing the "Done" Button Callback - -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); - } - } -}); -``` - -API Reference: - -- [`DocumentScanner()`]({{ site.api }}document-scanner.html#documentscanner) -- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig) -- [`DocumentResultViewConfig`]({{ site.api }}document-scanner.html#documentresultviewconfig) - -##### Customizing the "Upload" Button - -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). - -```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, - } - ); - }, - }, -}); -``` - -API Reference: - -- [`DocumentScanner()`]({{ site.api }}document-scanner.html#documentscanner) -- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig) -- [`DocumentResultViewConfig`]({{ site.api }}document-scanner.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)**. - -Read on to learn how to use this web-based wrapper SDK in the [MWC Getting Started Guide]({{ site.guides }}mobile-web-capture.html). diff --git a/guides/index.md b/guides/index.md index 3e2f7f7..61c8cf4 100644 --- a/guides/index.md +++ b/guides/index.md @@ -2,18 +2,889 @@ 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 +noTitleIndex: false +title: Mobile Document Scanner JS Edition - Scan Single-Page Documents +keywords: Documentation, Mobile Document Scanner, Web, JS Edition, Dynamsoft Document Scanner, +description: Mobile Document Scanner JS Edition User Guide --- -# Mobile Web Capture User Guide Index +# Scan Single-Page Documents with Dynamsoft Document Scanner -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**: +> [!TIP] +> Prerequisite: Read the [Introduction]({{ site.introduction }}index.html) before proceeding. -- [DDS Developer Guide]({{ site.guides }}document-scanner.html) +Dynamsoft's **Mobile Document Scanner JavaScript Edition (MDS)** is a web SDK designed for scanning single-page documents. MDS captures images of the documents and enhances their quality to professional standards, making it an ideal tool for mobile document scanning. -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: +> [!NOTE] +> See it in action with the [Dynamsoft Document Scanner Demo](https://demo.dynamsoft.com/document-scanner/). -- [MWC Developer Guide]({{ site.guides }}mobile-web-capture.html) +This guide walks you through building a web application that scans single-page documents using **MDS** with pre-defined configurations. + + + +## License + +### Get a Trial License + +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 for a total of two months of free access. + +### Get a Full License + +[Contact us](https://www.dynamsoft.com/company/contact/) to purchase a full license. + +## Quick Start + +To use the **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 **Document Scanner** 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 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. + +
    + +
    +
    Build from Source
    + +### 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. +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: + ```shell + npm install + ``` +5. Build the project + After installing dependencies, build the project by running: + ```shell + npm run build + ``` +6. Serve the project locally + Start the local 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 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
    + +### Use Precompiled Script + +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 ` +``` + +Below is the complete Hello World sample page that uses this precompiled script from a CDN. + +> [!TIP] +> The code is identical to the [`/samples/hello-world.html`](https://github.com/Dynamsoft/document-scanner-javascript/blob/main/samples/hello-world.html) file mentioned in the [Build from Source](#build-from-source) section, except for the script source. + +> [!WARNING] +> **Remember** to replace `"YOUR_LICENSE_KEY_HERE"` with your actual license key. + +```html + + + + + + Dynamsoft Document Scanner - Hello World + + + +

    Dynamsoft Document Scanner

    +
    + + + +``` + +To run the sample, create a new file called `hello-world.html`, then copy and paste the code above into the file. Next, serve the page directly by deploying it to a server. + +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 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 **Document Scanner** 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: + ```shell + npm install + ``` + +#### Point to Resources + +The library uses [`engineResourcePaths`]({{ site.api }}document-scanner.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 }}document-scanner.html#documentscanner) +- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig) +- [`DocumentScannerViewConfig`]({{ site.api }}document-scanner.html#documentscannerviewconfig) +- [`engineResourcePaths`]({{ site.api }}document-scanner.html#engineresourcepaths) +- [`cameraEnhancerUIPath`]({{ site.api }}document-scanner.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 + +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). + +### Reference MDS + +```html + + + + + + Dynamsoft Document Scanner - Hello World + + + +``` + +In this step, MDS is referenced using a relative local path in the `` section of the HTML. + +```html + +``` + +Alternatively, the script can be referenced from a CDN: + +```html + +``` + +**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-Host Resources](#self-host-resources). + +### Instantiate MDS + +```javascript +const documentScanner = new Dynamsoft.DocumentScanner({ + license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key +}); +``` + +API Reference: + +- [`DocumentScanner()`]({{ site.api }}document-scanner.html#documentscanner) + +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] +> Instantiating the `DocumentScanner` requires a valid license key. + +### Launch MDS + +```javascript +const result = await documentScanner.launch(); +``` + +API Reference: + +- [`launch()`]({{ site.api }}document-scanner.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. + +> [!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`. +> +> For Option 3: The `DocumentCorrectionView` step is skipped. Image correction is applied automatically, and the user is taken directly to `DocumentResultView`. + +In `DocumentResultView`, if needed, the user can return to `DocumentCorrectionView` to make additional adjustments or press "Re-take" to restart the scanning process. + +### Display the Result + +The workflow returns a scanned image object of type `CorrectedImageResult`. To display the scanned `result` image, we use a `
    ` in the ``: + +```html + +

    Dynamsoft Document Scanner

    +
    +``` + +API Reference: + +- [`DocumentResult`]({{ site.api }}document-scanner.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); +} else { + resultContainer.innerHTML = "

    No image scanned. Please try again.

    "; +} +``` + +## Custom Usage + +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 **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. +3. `showCorrectionView`: Configures whether or not to show `DocumentCorrectionView`. +4. `showResultView`: Configures whether or not to show `DocumentResultView`. +5. `scannerViewConfig`: Configures the main scanner view with the following properties: + 1. `container`: The HTML container for the `DocumentScannerView`. + 2. `cameraEnhancerUIPath`: Path to the UI definition file (.html) for the `DocumentScannerView`. + 3. `enableAutoCropMode`: sets the default Auto-Crop mode. + 4. `enableSmartCaptureMode`: sets the default Smart Capture mode. + 5. `scanRegion`: sets the scan region within the viewfinder for document scanning. + 6. `minVerifiedFramesForSmartCapture`: sets minimum number of camera frames to detect document boundaries on Smart Capture mode. + 7. `showSubfooter`: sets the visibility of the mode selector menu. + 8. `showPoweredByDynamsoft`: sets the visibility of the Dynamsoft branding message. +6. `correctionViewConfig`: Configures the document correction view. + 1. `container`: The HTML container for the `DocumentCorrectionView`. + 2. `toolbarButtonsConfig`: Configures the appearance and labels of the buttons for the `DocumentCorrectionView` UI. + 3. `onFinish`: Handler called when the user clicks the "Apply" button. +7. `resultViewConfig`: Configures the result view with the following properties: + 1. `container`: The HTML container for the `DocumentResultView`. + 2. `toolbarButtonsConfig`: Configures the appearance and labels of the buttons for the `DocumentResultView` UI. + 3. `onDone`: Handler called when the user clicks the "Done" button. + 4. `onUpload`: Handler called when the user clicks the "Upload" button. +8. `templateFilePath`: Path to a Capture Vision template for scanning configuration. Typically not needed as the default template is used. +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 **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](#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 +}); +``` + +### Workflow Customization + +In the Hello World sample, we use the complete workflow with minimum configuration: + +```javascript +const documentScanner = new Dynamsoft.DocumentScanner({ + 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, **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, **MDS** confines its **Views** within that container. + +> [!NOTE] +> Containers assigned to its constituent **Views** will be ignored. + +```html +
    +``` + +```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 + } +}); +``` + +API Reference: + +- [`DocumentScanner()`]({{ site.api }}document-scanner.html#documentscanner) +- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig) + +#### Example 2: Only Show `DocumentScannerView` + +In some cases, `DocumentResultView` and `DocumentCorrectionView` may not be needed, so they can be hidden: + +```javascript +const documentScanner = new Dynamsoft.DocumentScanner({ + 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) + +#### Example 3: Specify Individual View 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") + } +}); +``` + +API Reference: + +- [`DocumentScanner()`]({{ site.api }}document-scanner.html#documentscanner) +- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig) + +#### Example 4: Scan Static Image Directly + +To scan an image file directly without opening the Scanner View at all, you can pass a `File` object to `launch()`. As an example, select an image file from the local disk: + +```html + +``` + +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 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); + } else { + 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, MDS will **only process the first page**. + +#### Example 5: Configure Scan Modes + +The Document Scanner View comes with three scan modes: + +1. Border Detection +2. Auto-Crop +3. Smart Capture + +By default, Border Detection mode is enabled upon entering the Scanner View, while the other two are turned off by default. The user can then enable them by clicking their respective icons in the scanning mode sub-footer. From the `DocumentScannerViewConfig` interface, you can: + +1. Set the default state of Auto-Crop mode with `enableAutoCropMode` +2. Set the default state of Smart Capture mode with `enableSmartCaptureMode` +3. Set the visibility of the scanning mode sub-footer with `showSubfooter` + +> [!NOTE] +> Border Detection Mode is always enabled upon the Scanner View, and the scanning sub-footer is visible by default. + +For example, the following config enables all three scanning modes and hides the scanning mode sub-footer to prevent the viewer from changing or viewing the scanning modes: + +```js +const documentScanner = new Dynamsoft.DocumentScanner({ + license: "YOUR_LICENSE_KEY_HERE", // Replace this with your actual license key + scannerViewConfig: { + enableAutoCropMode: true, + enableSmartCaptureMode: true, + false, +}}); +``` + +API Reference: + +- [`DocumentScanner()`]({{ site.api }}document-scanner.html#documentscanner) +- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig) +- [`DocumentScannerViewConfig`]({{ site.api }}document-scanner.html#documentscannerviewconfig) + +### View-Based Customization + +In addition to modifying the workflow, individual Views can be customized with configuration options for UI styling, button settings, and event handling. + +#### `DocumentScannerView` Configuration + +##### Customizing the `DocumentScannerView` UI + +Consider the following configuration interface used for customizing the `DocumentScannerView`: + +```javascript +interface DocumentScannerViewConfig { + container?: HTMLElement; + templateFilePath?: string; + cameraEnhancerUIPath?: string; +} +``` + +We previously covered `container` in [Workflow Customization](#workflow-customization), and changing `templateFilePath` is usually not required. Now, let's focus on `cameraEnhancerUIPath`. + +> [!TIP] +> 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). + +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](#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`: + + ```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 + }, + }); + ``` + +API Reference: + +- [`DocumentScanner()`]({{ site.api }}document-scanner.html#documentscanner) +- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig) +- [`DocumentScannerViewConfig`]({{ site.api }}document-scanner.html#documentscannerviewconfig) + +##### Customizing the Scanning Region + +We can customize the scanning region in the viewfinder with the `scanRegion` property in the configuration object: + +```js +interface ScanRegion { + ratio: { + width: number; + height: number; + }; + regionBottomMargin: number; // Bottom margin calculated in pixel + style: { + strokeWidth: number; + strokeColor: string; + }; +} +``` + +API Reference: + +[`ScanRegion`]({{ site.api }}document-scanner.html#scanregion) + +Here is how the scanning region is set: + +1. Use the `ratio` property to set the height-to-width of the rectangular scanning region, then scale the rectangle up to fit within the viewfinder. +2. Translate the rectangular up by the number of pixels specified by `regionBottomMargin`. +3. Create a visual border for the scanning region boundary on the viewfinder with a given stroke width in pixels, and a stroke color. + +For example: + +```js +scanRegion { + ratio: { + width: 2; + height: 3; + }; + regionBottomMargin: 20; + style: { + strokeWidth: 3; + strokeColor: "green"; + }; +} +``` + +This creates 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. + +#### `DocumentCorrectionView` Configuration + +Consider the following configuration interface used for customizing the `DocumentCorrectionView`: + +```javascript +interface DocumentCorrectionViewConfig { + container?: HTMLElement; + toolbarButtonsConfig?: DocumentCorrectionViewToolbarButtonsConfig; + onFinish?: (result: DocumentScanResult) => void; +} +``` + +`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: + +```javascript +type ToolbarButtonConfig = Pick; +interface DocumentCorrectionViewToolbarButtonsConfig { + fullImage?: ToolbarButtonConfig; + detectBorders?: ToolbarButtonConfig; + apply?: ToolbarButtonConfig; +} +``` + +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" + } + } + } +}); +``` + +API Reference: + +- [`DocumentScanner()`]({{ site.api }}document-scanner.html#documentscanner) +- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig) +- [`DocumentCorrectionViewConfig`]({{ site.api }}document-scanner.html#documentcorrectionviewconfig) + +##### Customizing Apply Button Callback + +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); + } + } +}); +``` + +API Reference: + +- [`DocumentScanner()`]({{ site.api }}document-scanner.html#documentscanner) +- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig) +- [`DocumentCorrectionViewConfig`]({{ site.api }}document-scanner.html#documentcorrectionviewconfig) + +#### `DocumentResultView` Configuration + +Consider the following configuration interface used for customizing the `DocumentResultView`: + +```javascript +interface DocumentResultViewConfig { + container?: HTMLElement; + toolbarButtonsConfig?: DocumentResultViewToolbarButtonsConfig; + onDone?: (result: DocumentResult) => Promise; + onUpload?: (result: DocumentResult) => Promise; +} +``` + +Like with `DocumentCorrectionView`, we'll look at `toolbarButtonsConfig`, `onDone` and `onUpload`. + +##### Styling Buttons + +The `toolbarButtonsConfig` property, of type `DocumentResultViewToolbarButtonsConfig`, customizes the appearance and functionality of the UI buttons. Here is its definition: + +```javascript +type ToolbarButtonConfig = Pick; +interface interface DocumentResultViewToolbarButtonsConfig { + retake?: ToolbarButtonConfig; + correct?: ToolbarButtonConfig; + share?: ToolbarButtonConfig; + upload?: ToolbarButtonConfig; + done?: ToolbarButtonConfig; +} +``` + +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 + } + } + } +}); +``` + +API Reference: + +- [`DocumentScanner()`]({{ site.api }}document-scanner.html#documentscanner) +- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig) +- [`DocumentResultViewConfig`]({{ site.api }}document-scanner.html#documentresultviewconfig) + +##### Customizing the "Done" Button Callback + +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); + } + } +}); +``` + +API Reference: + +- [`DocumentScanner()`]({{ site.api }}document-scanner.html#documentscanner) +- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig) +- [`DocumentResultViewConfig`]({{ site.api }}document-scanner.html#documentresultviewconfig) + +##### Customizing the "Upload" Button + +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](#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, + } + ); + }, + }, +}); +``` + +API Reference: + +- [`DocumentScanner()`]({{ site.api }}document-scanner.html#documentscanner) +- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig) +- [`DocumentResultViewConfig`]({{ site.api }}document-scanner.html#documentresultviewconfig) + +## Next Step + +**MDS** 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)**. + +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/guides/mobile-web-capture-customization-v3.0.md index f6c22ad..d3d1d2b 100644 --- a/guides/mobile-web-capture-customization-v3.0.md +++ b/guides/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/guides/mobile-web-capture-v3.0.md index 7369fa7..23e6a22 100644 --- a/guides/mobile-web-capture-v3.0.md +++ b/guides/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/index.md b/index.md index 2df89c3..67232b9 100644 --- a/index.md +++ b/index.md @@ -1,8 +1,8 @@ --- 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 @@ -13,6 +13,9 @@ description: Mobile Web Capture Documentation Homepage - [Scan Multi-Page Documents]({{ site.guides }}mobile-web-capture.html) - [Customize UI And Workflow]({{ site.guides }}mobile-web-capture-customization.html) - Code Gallery + - [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) - [Frameworks]({{ site.code-gallery }}frameworks.html) - [API References]({{ site.api }}index.html) - [Document Scanner]({{ site.api }}document-scanner.html) diff --git a/introduction/index.md b/introduction/index.md index 3ae7693..a9bcddb 100644 --- a/introduction/index.md +++ b/introduction/index.md @@ -3,18 +3,17 @@ 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. +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. +However, when hardware scanners are not feasible or convenient, mobile device cameras can serve as effective alternatives. **Dynamsoft's Mobile Document Scanner (MDC)** is a document scanning SDK specifically designed to address this need. ## Common Usage Scenarios @@ -22,55 +21,27 @@ However, when hardware scanners are not feasible or convenient, mobile device ca 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. - > [!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 - -| 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 | | ✓ | - > [!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. +> To deliver these features, we built the **Document Scanner** 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). ## Design Principles -We designed **DDS** and **MWC** with three core principles in mind: +We designed the **Document Scanner** 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. @@ -78,72 +49,17 @@ The following section provides a high-level overview of the Views, followed by a ## 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: +Document Scanner 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 ![Document Scanner View](/assets/imgs/document-scanner-view-demo.png) -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 - -![Editor View](/assets/imgs/editor-view-demo.png) - -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 +75,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 the **Document Scanner**: 1. [`WebAssembly`](https://caniuse.com/?search=WebAssembly) 2. [`Blob`](https://caniuse.com/?search=Blob) @@ -179,6 +95,6 @@ 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 only need to scan single-page documents, 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). +- If you need to handle multi-page documents, multi-**document** scenarios, PDF files, annotations, and more, you will need the fully-featured **Mobile Web Capture (MWC)**. In this case, proceed to the [Mobile Web Capture Developer Guide]({{ site.guides }}mobile-web-capture.html). diff --git a/release-notes/document-scanner.md b/release-notes/document-scanner.md index d3653df..c880636 100644 --- a/release-notes/document-scanner.md +++ b/release-notes/document-scanner.md @@ -4,7 +4,7 @@ needAutoGenerateSidebar: true needGenerateH3Content: true noTitleIndex: true title: Document Scanner - Release Notes -keywords: Documentation, Mobile Web Capture, Document Scanner, DDS, MWC, Release Notes +keywords: Documentation, Mobile Document Scanner, Web, JS Edition, Document Scanner, DDS, MWC, Release Notes breadcrumbText: Release Notes description: Mobile Web Capture Documentation Release Notes permalink: /release-notes/document-scanner.html 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 --- From 02b1511fd61c8859785bea1d3fd65a27d62d071f Mon Sep 17 00:00:00 2001 From: h-dynamsoft <172081603+dynamsoft-h@users.noreply.github.com> Date: Fri, 27 Jun 2025 17:05:49 -0700 Subject: [PATCH 06/10] Staging (#104) * fix: language * fix: site tree * fix: syntax * chore: replace DDS with MDS --- _includes/sidelist-guides.html | 7 +------ api/document-scanner.md | 2 +- api/index.md | 6 +++--- code-gallery/frameworks.md | 2 +- code-gallery/mobile-web-capture/index.md | 4 ++-- guides/index.md | 18 +++++++++--------- index.md | 5 +---- introduction/index-v3.0.md | 4 ++-- introduction/index.md | 11 ++++++----- release-notes/mobile-web-capture.md | 2 +- 10 files changed, 27 insertions(+), 34 deletions(-) diff --git a/_includes/sidelist-guides.html b/_includes/sidelist-guides.html index a0d1957..6092930 100644 --- a/_includes/sidelist-guides.html +++ b/_includes/sidelist-guides.html @@ -1,7 +1,2 @@ -
  • Developer Guides - +
  • Developer Guide
    • diff --git a/api/document-scanner.md b/api/document-scanner.md index 3bf0e5d..6188102 100644 --- a/api/document-scanner.md +++ b/api/document-scanner.md @@ -9,7 +9,7 @@ breadcrumbText: API References description: Mobile Document Scanner JS Edition - API Reference --- -# Dynamsoft Document Scanner API Reference +# Mobile Document Scanner API Reference The `DocumentScanner` class handles the document scanning process, including image capture, correction, and result display. diff --git a/api/index.md b/api/index.md index a6a0b7c..f2887f9 100644 --- a/api/index.md +++ b/api/index.md @@ -12,12 +12,12 @@ description: Mobile Web Capture Documentation API Reference Index ## 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 **Mobile Document Scanner (MDS)**, a component of **Mobile Web Capture (MWC)**. You can find its API reference here: -- [Dynamsoft Document Scanner API Reference]({{ site.api }}document-scanner.html) +- [Mobile Document Scanner API Reference]({{ site.api }}index.html) > [!TIP] -> See it in action with the [Dynamsoft Document Scanner Demo](https://demo.dynamsoft.com/document-scanner/). +> See it in action with the [Mobile Document Scanner Demo](https://demo.dynamsoft.com/document-scanner/). ## Scan Multi-Page Documents diff --git a/code-gallery/frameworks.md b/code-gallery/frameworks.md index 2b43335..2fc4f65 100644 --- a/code-gallery/frameworks.md +++ b/code-gallery/frameworks.md @@ -11,7 +11,7 @@ description: Mobile Web Capture Framework Samples # 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. diff --git a/code-gallery/mobile-web-capture/index.md b/code-gallery/mobile-web-capture/index.md index 648dffd..260a88d 100644 --- a/code-gallery/mobile-web-capture/index.md +++ b/code-gallery/mobile-web-capture/index.md @@ -13,7 +13,7 @@ description: Mobile Document Scanner JS Edition User Guide > [!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 SDK designed for 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 Document Scanner JS Edition 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.guides }}index.html) instead. -
  • Mobile Document Scanner
    • - -
  • - Documentation -
    • - - Download Free Trial -
    -
    - -
    -
    -
    - -
    Resource Base
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    - - diff --git a/_includes/sidelist-full-tree.html b/_includes/sidelist-full-tree.html index e75dce5..2c8c62b 100644 --- a/_includes/sidelist-full-tree.html +++ b/_includes/sidelist-full-tree.html @@ -1,5 +1,5 @@ {%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-introduction.html" -%} -{%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-guides.html" -%} +{%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-guide.html" -%} {%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-code-gallery.html" -%} {%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-api.html" -%} {%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-release-notes.html" -%} diff --git a/_includes/sidelist-guide.html b/_includes/sidelist-guide.html new file mode 100644 index 0000000..ba8215a --- /dev/null +++ b/_includes/sidelist-guide.html @@ -0,0 +1,2 @@ +
  • Developer Guide +
    • diff --git a/_includes/sidelist-guides.html b/_includes/sidelist-guides.html deleted file mode 100644 index 6092930..0000000 --- a/_includes/sidelist-guides.html +++ /dev/null @@ -1,2 +0,0 @@ -
  • Developer Guide -
    • diff --git a/_includes/sidelist-release-notes.html b/_includes/sidelist-release-notes.html index 5824f96..ecc0641 100644 --- a/_includes/sidelist-release-notes.html +++ b/_includes/sidelist-release-notes.html @@ -1 +1 @@ -
  • Release Notes
    • +
  • Release Notes
    • diff --git a/api/document-scanner.md b/api/document-scanner.md index 6188102..d63326d 100644 --- a/api/document-scanner.md +++ b/api/document-scanner.md @@ -425,7 +425,7 @@ interface UtilizedTemplateNames { ### `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). +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 diff --git a/code-gallery/mobile-web-capture/customization-guide.md b/code-gallery/mobile-web-capture/customization-guide.md index a6fbdda..697f5f3 100644 --- a/code-gallery/mobile-web-capture/customization-guide.md +++ b/code-gallery/mobile-web-capture/customization-guide.md @@ -11,7 +11,7 @@ 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. diff --git a/code-gallery/mobile-web-capture/index.md b/code-gallery/mobile-web-capture/index.md index 260a88d..9c2624b 100644 --- a/code-gallery/mobile-web-capture/index.md +++ b/code-gallery/mobile-web-capture/index.md @@ -21,7 +21,7 @@ description: Mobile Document Scanner JS Edition 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 [Mobile Document Scanner User Guide]({{ site.guides }}index.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. + ``` In this step, MDS is referenced using a relative local path in the `` section of the HTML. @@ -327,7 +345,7 @@ Alternatively, the script can be referenced from a CDN: ```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 }); ``` @@ -352,9 +370,9 @@ API Reference: 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`. @@ -369,8 +387,9 @@ The workflow returns a scanned image object of type `CorrectedImageResult`. To d ```html -

    Mobile Document Scanner

    -
    +

    Mobile Document Scanner

    +
    + ``` API Reference: @@ -381,11 +400,11 @@ The following code clears the result container and displays the scanned result a ```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.

    "; } ``` @@ -432,8 +451,8 @@ The customization examples below will build on the Hello World code from the [pr ```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 }); ``` @@ -443,7 +462,7 @@ 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(); @@ -464,11 +483,11 @@ As long as the `DocumentScanner` container is assigned, **MDS** confines its **V ```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 + }, }); ``` @@ -483,9 +502,9 @@ 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, }); ``` @@ -499,23 +518,29 @@ API Reference: 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"), + }, }); ``` @@ -536,20 +561,20 @@ Then get the input file as a `File` object, and pass that file object to `launch ```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.

    "; } -} + } }; ``` @@ -622,23 +647,27 @@ 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](#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`: - ```shell - 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: @@ -723,18 +752,18 @@ We can use it to change the icon and label of each of the three buttons individu ```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", + }, + }, + }, }); ``` @@ -750,13 +779,13 @@ The `onFinish` callback triggers after the user's corrections have been applied. ```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); + }, + }, }); ``` @@ -801,18 +830,18 @@ Below is an example that sets a custom label and image icon for the "retake" but ```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, + }, + }, + }, }); ``` @@ -828,14 +857,13 @@ The `onDone` callback triggers when the "Done" button is pressed. For example, t ```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); + }, + }, }); ``` @@ -856,24 +884,24 @@ The following example demonstrates how to upload the result image to a server: ```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, }, + ); }, + }, }); ``` diff --git a/guides/mobile-web-capture-customization-v3.0.md b/guide/mobile-web-capture-customization-v3.0.md similarity index 100% rename from guides/mobile-web-capture-customization-v3.0.md rename to guide/mobile-web-capture-customization-v3.0.md diff --git a/guides/mobile-web-capture-v3.0.md b/guide/mobile-web-capture-v3.0.md similarity index 100% rename from guides/mobile-web-capture-v3.0.md rename to guide/mobile-web-capture-v3.0.md diff --git a/index.md b/index.md index 0527e31..680ec79 100644 --- a/index.md +++ b/index.md @@ -8,13 +8,11 @@ description: Mobile Document Scanner JS Edition Documentation Homepage # Mobile Web Capture - [Introduction]({{ site.introduction }}index.html) -- [Developer Guide]({{ site.guides }}index.html) +- [Developer Guide]({{ site.guide }}index.html) - Code Gallery - [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) - [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) +- [Release notes]({{ site.release-notes }}index.html) diff --git a/introduction/index.md b/introduction/index.md index 92f85b1..6da1bf5 100644 --- a/introduction/index.md +++ b/introduction/index.md @@ -23,7 +23,7 @@ When digitizing physical documents - whether for easier storage, better accessib 3. **Document Processing** – Add *annotations* to scanned pages and perform common editing tasks such as cropping and color filtering. > [!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). +> 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 [MDS user guide]({{ site.guide }}index.html). > [!NOTE] > To deliver these features, we built the **Document Scanner** 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). @@ -96,6 +96,6 @@ The table below lists the **minimum supported versions** of browsers based on th ## Next Step -- If you only need to scan single-page documents, proceed to the [Mobile Document Scanner Developer Guide]({{ site.guides }}index.html). +- If you only need to scan single-page documents, proceed to the [Mobile Document Scanner Developer Guide]({{ site.guide }}index.html). -- If you need to handle multi-page documents, **multi-document** scenarios, PDF files, annotations, and more, you will need the fully-featured **Mobile Web Capture (MWC)**. In this case, proceed to the [Mobile Web Capture Developer Guide]({{ site.guides }}mobile-web-capture.html). +- If you need to handle multi-page documents, **multi-document** scenarios, PDF files, annotations, and more, you will need the fully-featured **Mobile Web Capture (MWC)**. In this case, proceed to the [Mobile Web Capture Developer Guide]({{ site.code-gallery }}mobile-web-capture/index.html). diff --git a/release-notes/document-scanner.md b/release-notes/index.md similarity index 97% rename from release-notes/document-scanner.md rename to release-notes/index.md index c880636..af69e41 100644 --- a/release-notes/document-scanner.md +++ b/release-notes/index.md @@ -4,13 +4,12 @@ needAutoGenerateSidebar: true needGenerateH3Content: true noTitleIndex: true title: Document Scanner - Release Notes -keywords: Documentation, Mobile Document Scanner, Web, JS Edition, Document Scanner, DDS, MWC, 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 -permalink: /release-notes/document-scanner.html --- -# Document Scanner Release Notes +# Mobile Document Scanner JavaScript Edition Release Notes ## 1.2.0 (30/04/2025) @@ -27,7 +26,7 @@ permalink: /release-notes/document-scanner.html - `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; diff --git a/release-notes/mobile-web-capture.md b/release-notes/mobile-web-capture.md index d8e9df2..e0002b0 100644 --- a/release-notes/mobile-web-capture.md +++ b/release-notes/mobile-web-capture.md @@ -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 **Mobile Document Scanner (MDS)**. Learn more in the [MDS user guide]({{ site.guides }}index.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/web.config b/web.config index 27b0548..f807c1b 100644 --- a/web.config +++ b/web.config @@ -40,6 +40,26 @@ + + + + + + + + + + + + + + + + + + + + From 7f340a60e925cc276ec47e1b3972fe42162f0219 Mon Sep 17 00:00:00 2001 From: h-dynamsoft <172081603+dynamsoft-h@users.noreply.github.com> Date: Tue, 1 Jul 2025 17:11:28 -0700 Subject: [PATCH 08/10] Staging (#106) * fix: intro description link * fix: API reference links --- _includes/sidelist-api.html | 6 +- api/document-scanner.md | 451 ----------------- api/index-v3.0.md | 18 +- api/index.md | 452 +++++++++++++++++- code-gallery/mobile-web-capture/api.md | 2 +- .../mobile-web-capture/customization-guide.md | 4 +- guide/index.md | 78 +-- index.md | 2 +- 8 files changed, 490 insertions(+), 523 deletions(-) delete mode 100644 api/document-scanner.md diff --git a/_includes/sidelist-api.html b/_includes/sidelist-api.html index f146fc0..8adc790 100644 --- a/_includes/sidelist-api.html +++ b/_includes/sidelist-api.html @@ -1,6 +1,2 @@ -
  • API References - +
  • API Reference
    • diff --git a/api/document-scanner.md b/api/document-scanner.md deleted file mode 100644 index d63326d..0000000 --- a/api/document-scanner.md +++ /dev/null @@ -1,451 +0,0 @@ ---- -layout: default-layout -needAutoGenerateSidebar: true -needGenerateH3Content: true -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 ---- - -# Mobile 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.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/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 f2887f9..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 Document Scanner JS Edition - API Reference Index -keywords: Documentation, Mobile Document Scanner, Web, JS Edition, 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 **Mobile Document Scanner (MDS)**, a component of **Mobile Web Capture (MWC)**. You can find its API reference here: + -- [Mobile Document Scanner API Reference]({{ site.api }}index.html) +## Constructor -> [!TIP] -> See it in action with the [Mobile 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/mobile-web-capture/api.md b/code-gallery/mobile-web-capture/api.md index db29460..fed9cef 100644 --- a/code-gallery/mobile-web-capture/api.md +++ b/code-gallery/mobile-web-capture/api.md @@ -203,7 +203,7 @@ interface MobileWebCaptureConfig { ##### See Also -- [`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig) +- [`DocumentScannerConfig`]({{ site.api }}index.html#documentscannerconfig) #### Example diff --git a/code-gallery/mobile-web-capture/customization-guide.md b/code-gallery/mobile-web-capture/customization-guide.md index 697f5f3..ef9f141 100644 --- a/code-gallery/mobile-web-capture/customization-guide.md +++ b/code-gallery/mobile-web-capture/customization-guide.md @@ -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 diff --git a/guide/index.md b/guide/index.md index 7338e15..2161c55 100644 --- a/guide/index.md +++ b/guide/index.md @@ -12,7 +12,7 @@ description: Mobile Document Scanner JS Edition User Guide # Scan Single-Page Documents with Mobile Document Scanner > [!TIP] -> Read the [Introduction]({{ site.introduction }}index.html) for an overview of the SDK architecture. +> Read the [Introduction]({{ site.introduction }}index.html) for common use cases, an overview of the SDK architecture, and system requirements. Dynamsoft's **Mobile Document Scanner JavaScript Edition (MDS)** is a web SDK designed for scanning single-page documents. MDS captures images of the documents and enhances their quality to professional standards, making it an ideal tool for mobile document scanning. @@ -209,7 +209,7 @@ First, download a copy of the resources: #### Point to Resources -The library uses [`engineResourcePaths`]({{ site.api }}document-scanner.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): +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({ @@ -230,11 +230,11 @@ 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) -- [`engineResourcePaths`]({{ site.api }}document-scanner.html#engineresourcepaths) -- [`cameraEnhancerUIPath`]({{ site.api }}document-scanner.html#cameraenhanceruipaths) +- [`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 @@ -351,7 +351,7 @@ const documentScanner = new Dynamsoft.DocumentScanner({ API Reference: -- [`DocumentScanner()`]({{ site.api }}document-scanner.html#documentscanner) +- [`DocumentScanner()`]({{ site.api }}index.html#documentscanner) 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). @@ -366,7 +366,7 @@ 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: @@ -394,7 +394,7 @@ The workflow returns a scanned image object of type `CorrectedImageResult`. To d 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: @@ -414,7 +414,7 @@ This section builds on the Hello World sample to demonstrate how to configure ** ### `DocumentScannerConfig` Overview -[`DocumentScannerConfig`]({{ site.api }}document-scanner.html#documentscannerconfig) is the primary configuration object for customizing **MDS**. 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. @@ -493,8 +493,8 @@ const documentScanner = new Dynamsoft.DocumentScanner({ 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` @@ -510,8 +510,8 @@ const documentScanner = new Dynamsoft.DocumentScanner({ 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 @@ -546,8 +546,8 @@ const documentScanner = new Dynamsoft.DocumentScanner({ 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 @@ -614,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 @@ -671,9 +671,9 @@ This file defines the UI for `DocumentScannerView`. However, since files on the 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 @@ -695,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: @@ -769,9 +769,9 @@ const documentScanner = new Dynamsoft.DocumentScanner({ 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 @@ -791,9 +791,9 @@ const documentScanner = new Dynamsoft.DocumentScanner({ 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 @@ -847,9 +847,9 @@ const documentScanner = new Dynamsoft.DocumentScanner({ 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 @@ -869,9 +869,9 @@ const documentScanner = new Dynamsoft.DocumentScanner({ 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 @@ -907,9 +907,9 @@ const documentScanner = new Dynamsoft.DocumentScanner({ 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) ## Next Step diff --git a/index.md b/index.md index 680ec79..5224bad 100644 --- a/index.md +++ b/index.md @@ -14,5 +14,5 @@ description: Mobile Document Scanner JS Edition Documentation Homepage - [Customization Guide]({{ site.code-gallery }}mobile-web-capture/customization-guide.html) - [API Reference]({{ site.code-gallery }}mobile-web-capture/api.html) - [Frameworks]({{ site.code-gallery }}frameworks.html) -- [API References]({{ site.api }}index.html) +- [API Reference]({{ site.api }}index.html) - [Release notes]({{ site.release-notes }}index.html) From 1d1a7222533aceef249190f6264a9ad6e5a68ccc Mon Sep 17 00:00:00 2001 From: h-dynamsoft <172081603+dynamsoft-h@users.noreply.github.com> Date: Thu, 3 Jul 2025 15:56:12 -0700 Subject: [PATCH 09/10] fix: various content fixes (#107) --- _includes/sidelist-code-gallery.html | 2 +- code-gallery/mobile-web-capture/index.md | 6 +++--- guide/index.md | 14 ++++++++------ index.md | 4 ++-- introduction/index.md | 22 ++++++++-------------- release-notes/mobile-web-capture.md | 2 +- 6 files changed, 23 insertions(+), 27 deletions(-) diff --git a/_includes/sidelist-code-gallery.html b/_includes/sidelist-code-gallery.html index eda2edf..4fbaf3b 100644 --- a/_includes/sidelist-code-gallery.html +++ b/_includes/sidelist-code-gallery.html @@ -1,11 +1,11 @@
  • Code Gallery
    • diff --git a/code-gallery/mobile-web-capture/index.md b/code-gallery/mobile-web-capture/index.md index 9c2624b..1187174 100644 --- a/code-gallery/mobile-web-capture/index.md +++ b/code-gallery/mobile-web-capture/index.md @@ -8,12 +8,12 @@ keywords: Documentation, Mobile Document Scanner, Web, JS Edition, Mobile Web Ca 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 **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. +**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/). @@ -60,7 +60,7 @@ To purchase a full license, [contact us](https://www.dynamsoft.com/company/conta To use **MWC**, the first step is to obtain its library files. You can acquire them from one of the following sources: -1. [**GitHub**](https://github.com/Dynamsoft/mobile-web-capture) – Contains the source files for the **MWC** SDK, which can be compiled into library files. +1. [**GitHub**](https://github.com/Dynamsoft/mobile-web-capture) – Contains the source files for the **MWC** sample, which can be compiled into library files. 2. [**npm**](https://www.npmjs.com/package/dynamsoft-mobile-web-capture) – Provides precompiled library files via npm for easier installation. 3. [**CDN**](https://cdn.jsdelivr.net/npm/dynamsoft-mobile-web-capture) – Delivers precompiled library files through a CDN for quick and seamless integration. diff --git a/guide/index.md b/guide/index.md index 2161c55..127c685 100644 --- a/guide/index.md +++ b/guide/index.md @@ -57,9 +57,9 @@ The trial license can be renewed twice for a total of two months of free access. ## Quick Start -To use the **Document Scanner**, first 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 **Document Scanner** 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. @@ -191,7 +191,7 @@ By default, the MDS library (whether pre-compiled or self-compiled) fetches reso First, download a copy of the resources: -1. Download **Document Scanner** from [GitHub](https://github.com/Dynamsoft/document-scanner-javascript) as a compressed folder. +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. @@ -305,7 +305,7 @@ Reference: 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 [Document Scanner JS 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 MDS @@ -913,6 +913,8 @@ API Reference: ## Next Step -**MDS** is a fully functional, ready-to-use **single page** 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 [**Mobile Web Capture User Guide**]({{ site.code-gallery }}mobile-web-capture/index.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/index.md b/index.md index 5224bad..c74ba86 100644 --- a/index.md +++ b/index.md @@ -5,14 +5,14 @@ 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 Guide]({{ site.guide }}index.html) - Code Gallery + - [Frameworks]({{ site.code-gallery }}frameworks.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) - - [Frameworks]({{ site.code-gallery }}frameworks.html) - [API Reference]({{ site.api }}index.html) - [Release notes]({{ site.release-notes }}index.html) diff --git a/introduction/index.md b/introduction/index.md index 6da1bf5..dd0f478 100644 --- a/introduction/index.md +++ b/introduction/index.md @@ -11,26 +11,20 @@ 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. However, when hardware scanners are not feasible or convenient, mobile device cameras can serve as effective alternatives. Dynamsoft designed the **Mobile Document Scanner JavaScript Edition (MDS)** SDK to address this need. +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] > 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. ## 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. - -> [!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 [MDS user guide]({{ site.guide }}index.html). - -> [!NOTE] -> To deliver these features, we built the **Document Scanner** 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). +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 the **Document Scanner** 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. @@ -50,7 +44,7 @@ The following section provides a high-level overview of the Views. ## Views -Document Scanner 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: +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. @@ -76,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 the **Document Scanner**: +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) @@ -98,4 +92,4 @@ The table below lists the **minimum supported versions** of browsers based on th - If you only need to scan single-page documents, proceed to the [Mobile Document Scanner Developer Guide]({{ site.guide }}index.html). -- If you need to handle multi-page documents, **multi-document** scenarios, PDF files, annotations, and more, you will need the fully-featured **Mobile Web Capture (MWC)**. In this case, proceed to the [Mobile Web Capture Developer Guide]({{ site.code-gallery }}mobile-web-capture/index.html). +- If you need to handle multi-page documents, **multi-document** scenarios, PDF files, annotations, and more, you will need the fully-featured **Mobile Web Capture (MWC)**. Please proceed to the [Mobile Web Capture Developer Guide]({{ site.code-gallery }}mobile-web-capture/index.html) **after** the [Mobile Document Scanner Developer Guide]({{ site.guide }}index.html). diff --git a/release-notes/mobile-web-capture.md b/release-notes/mobile-web-capture.md index e0002b0..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 From bfefe32f1e4f9008440e5c296bacd0be50c44183 Mon Sep 17 00:00:00 2001 From: h-dynamsoft <172081603+dynamsoft-h@users.noreply.github.com> Date: Thu, 3 Jul 2025 20:28:45 -0700 Subject: [PATCH 10/10] Fix Content (#108) * fix: various content fixes * fix: remove MWC guide link in introduction --- introduction/index.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/introduction/index.md b/introduction/index.md index dd0f478..d6ddef1 100644 --- a/introduction/index.md +++ b/introduction/index.md @@ -90,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, proceed to the [Mobile Document Scanner Developer Guide]({{ site.guide }}index.html). - -- If you need to handle multi-page documents, **multi-document** scenarios, PDF files, annotations, and more, you will need the fully-featured **Mobile Web Capture (MWC)**. Please proceed to the [Mobile Web Capture Developer Guide]({{ site.code-gallery }}mobile-web-capture/index.html) **after** the [Mobile Document Scanner Developer Guide]({{ site.guide }}index.html). +Proceed to the [Mobile Document Scanner Developer Guide]({{ site.guide }}index.html) to build your own document scanning web application.