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

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion CODEOWNERS

This file was deleted.

26 changes: 0 additions & 26 deletions TODO.md

This file was deleted.

10 changes: 5 additions & 5 deletions _articles/about/resources.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ description: Dynamic Web TWAIN SDK Documentation Resources Page

## Where to get Dynamic Web TWAIN

* <a href="https://www.dynamsoft.com/Downloads/WebTWAIN_Download.aspx" target="_blank">Official installer</a>
* <a href="https://www.dynamsoft.com/web-twain/downloads/" target="_blank">Official installer</a>

> This official package is meant for developers to evaluate the SDK. When the package is installed, you get all the resource files, documentation, and samples. A 30-day free trial is included when evaluating our SDK.

Expand All @@ -25,11 +25,11 @@ description: Dynamic Web TWAIN SDK Documentation Resources Page

## Sample code

* <a href="https://www.dynamsoft.com/Downloads/WebTWAIN-Sample-Download.aspx" target="_blank">Official samples</a>
* <a href="https://www.dynamsoft.com/web-twain/resources/code-gallery/" target="_blank">Official samples</a>

> We have many prebuilt samples to demonstrate common user scenarios. All samples contain the resource files required in your application. If a sample is hosted on the Dynamsoft website (not Github), then the sample comes with a 30-day free trial license as well. Otherwise, you can [get a trial license](#how-do-i-get-a-trial-license).

* <a href="https://github.com/dynamsoft-dwt" target="_blank">Github repo</a>
* <a href="https://github.com/dynamsoft/web-twain-samples" target="_blank">Github repo</a>

> In our repository, we've shared many samples and other projects related to `Dynamic Web TWAIN` . Some of which may be experimental. To try out these samples, a [trial license](#how-do-i-get-a-trial-license) is required.

Expand All @@ -39,11 +39,11 @@ Please visit our <a href="https://www.dynamsoft.com/customer/license/trialLicens

## Online Demo

* <a href="https://demo.dynamsoft.com/dwt/online_demo_scan.aspx" target="_blank">Official Demo - See Dynamic Web TWAIN in action</a>
* <a href="https://demo.dynamsoft.com/web-twain/" target="_blank">Official Demo - See Dynamic Web TWAIN in action</a>

## Useful Links

* <a href="https://www.dynamsoft.com/Secure/imaging-web-application-buyit.aspx#" target="_blank">Price / Online Store</a>
* <a href="https://www.dynamsoft.com/store/dynamic-web-twain/" target="_blank">Price / Online Store</a>
* <a href="https://www.youtube.com/user/Dynamsoft" target="_blank">Online Videos</a>

## Blogs
Expand Down
81 changes: 38 additions & 43 deletions _articles/faq/dwt-with-annotation.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,16 @@ layout: default-layout
noTitleIndex: true
needAutoGenerateSidebar: true
title: Dynamic Web TWAIN with Annotations
keywords: Dynamic Web TWAIN, Annotation
keywords: Dynamic Web TWAIN, Annotation, Dynamsoft Document Viewer, DWT, DDV
breadcrumbText: Dynamic Web TWAIN with Annotations – Hello World
description: Dynamic Web TWAIN with Annotations – Hello World
---

# Dynamic Web TWAIN with Annotations – Hello World

The Dynamic Web TWAIN library (DWT) is a software development kit (SDK) specifically designed to integrate efficient document scanning workflows into various web applications. The Dynamsoft Document Viewer (DDV) is a versatile web document viewer with support for document annotations. In this guide, we explain how to use DDV in place of the built-in DWT viewer to enable annotations and provide a superior viewer experience.
Dynamsoft's **Dynamic Web TWAIN (DWT)** is a software development kit (SDK) designed to integrate efficient document scanning workflows into web applications. **Dynamsoft Document Viewer (DDV)** is a versatile web document viewer with support for document annotations. In this guide, we explain how to **use DDV in place of DWT's built-in viewer** to enable **annotations** and provide a superior viewer experience.

In this sample, we create a **headless** DWT instance to scan images, and then pass the result to DDV to view, edit, annotate, etc. We then use DWT to save the result - **along with any edits and annotations** - to a file, or upload to the server.

![Flow chart for Dynamic Web TWAIN with Annotations – Hello World](/assets/imgs/dwt-with-ddv.jpg)

Expand All @@ -20,7 +22,7 @@ The Dynamic Web TWAIN library (DWT) is a software development kit (SDK) specific

Use the SDK by including the packages below:
- Dynamic Web TWAIN: provides scanning, saving, and uploading functionalities.
- Dynamsoft Document Viewer: provides improved document viewer and annotation functionalities
- Dynamsoft Document Viewer: provides improved document viewer and annotation functionalities.

### 1.1 Deliver Dependencies via CDN

Expand All @@ -30,20 +32,20 @@ Deliver the SDK dependencies with either the [jsDelivr](https://jsdelivr.com/) o

```html
<!--Dynamic Web TWAIN-->
<script src="https://cdn.jsdelivr.net/npm/dwt@latest/dist/dynamsoft.webtwain.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dwt@19.1.0/dist/dynamsoft.webtwain.min.js"></script>
<!--Dynamsoft Document Viewer-->
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/ddv.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/ddv.css">
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@3.0.0/dist/ddv.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@3.0.0/dist/ddv.css">
```

- UNPKG

```html
<!--Dynamic Web TWAIN-->
<script src="https://unpkg.com/dwt@latest/dist/dynamsoft.webtwain.min.js"></script>
<script src="https://unpkg.com/dwt@19.1.0/dist/dynamsoft.webtwain.min.js"></script>
<!--Dynamsoft Document Viewer-->
<script src="https://unpkg.com/dynamsoft-document-viewer@latest/dist/ddv.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dynamsoft-document-viewer@latest/dist/ddv.css">
<script src="https://unpkg.com/dynamsoft-document-viewer@3.0.0/dist/ddv.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dynamsoft-document-viewer@3.0.0/dist/ddv.css">
```

## 2. Define HTML Elements
Expand All @@ -60,7 +62,7 @@ Define the following elements:

```html
<input type="button" value="Scan" onclick="AcquireImage();" />
<input type="button" value="Save PDF" onclick="SavePDFs();" />
<input type="button" value="Save PDF" onclick="SavePDF();" />
<input type="button" value="Upload" onclick="Upload();" />
```

Expand All @@ -73,20 +75,17 @@ Define the following elements:
// Public trial license which is valid for 24 hours
// You can request a 30-day trial key from https://www.dynamsoft.com/customer/license/trialLicense/?product=dwtddv
Dynamsoft.DDV.Core.license = "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9";
Dynamsoft.DDV.Core.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/engine";
Dynamsoft.DDV.Core.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@3.0.0/dist/engine";
await Dynamsoft.DDV.Core.init();
```

### 3.2 Create the Edit Viewer

```javascript
// Enable image filtering
Dynamsoft.DDV.setProcessingHandler("imageFilter", new Dynamsoft.DDV.ImageFilter());
// Create a Dynamsoft Document Viewer Edit Viewer to display and edit documents scanned with Dynamic Web TWAIN
let editViewer;
editViewer = new Dynamsoft.DDV.EditViewer({
container: "container",
uiConfig: Dynamsoft.DDV.getDefaultUiConfig("editViewer", {includeAnnotationSet: true}),
});

// Create a Dynamsoft Document Viewer document to contain and display images scanned by Dynamic Web TWAIN
Expand All @@ -105,10 +104,9 @@ Links to related documentation:
- [`Edit Viewer`](https://www.dynamsoft.com/document-viewer/docs/features/viewers/editviewer.html)
- [`How to configure your desired uiconfig`](https://www.dynamsoft.com/document-viewer/docs/ui/customize/index.html)

Links to API Reference:
API Reference

- Dynamsoft Document Viewer:
- [`setProcessingHandler()`](https://www.dynamsoft.com/document-viewer/docs/api/namespace/ddv.html#static-setprocessinghandler)
- Dynamsoft Document Viewer:
- [`Dynamsoft.DDV.EditViewer`](https://www.dynamsoft.com/document-viewer/docs/api/class/editviewer.html#editviewer)
- [`createDocument()`](https://www.dynamsoft.com/document-viewer/docs/api/class/documentmanager.html#createdocument)
- [`openDocument()`](https://www.dynamsoft.com/document-viewer/docs/api/class/editviewer.html#opendocument)
Expand All @@ -120,7 +118,7 @@ Links to API Reference:
// You can request a 30-day trial key from https://www.dynamsoft.com/customer/license/trialLicense/?product=dwtddv
Dynamsoft.DWT.ProductKey = "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9";
Dynamsoft.DWT.UseDefaultViewer = false;
Dynamsoft.DWT.ResourcesPath = "https://cdn.jsdelivr.net/npm/dwt@latest/dist";
Dynamsoft.DWT.ResourcesPath = "https://cdn.jsdelivr.net/npm/dwt@19.1.0/dist";
// You need to set the service installer location here since the installer's size exceeds jsdelivr's limit. You'd better host the installers in your own environment.
Dynamsoft.DWT.ServiceInstallerLocation = 'https://download2.dynamsoft.com/Demo/DWT/Resources/dist/';

Expand All @@ -136,17 +134,17 @@ Dynamsoft.DWT.CreateDWTObjectEx({
);
```

Links to API Reference:
API Reference
- Dynamic Web TWAIN:
- [`CreateDWTObjectEx()`](/_articles/info/api/Dynamsoft_WebTwainEnv.md#createdwtobjectex)

## 4. Use SDK Features

### 4.1 Add Simple Scanning Functionality

Use the Dynamic Web TWAIN instance for scanning. After scan completion, import the scanned data into DDV for viewing, editing, and annotating.
Use the Dynamic Web TWAIN instance for scanning. Upon scan completion, import the scanned data into DDV for viewing, editing, and annotating.

#### 4.1.1 Register the OnPostTransferAsync Event
#### 4.1.1 Register the `OnPostTransferAsync` Event

```javascript
//Register the OnPostTransferAsync event in the success callback function of CreateDWTObjectEx.
Expand Down Expand Up @@ -181,7 +179,7 @@ function Dynamsoft_OnPostTransferAsync(outputInfo){
}
```

Links to API Reference:
API Reference

- Dynamic Web TWAIN:
- [`OnPostTransferAsync`](/_articles/info/api/WebTwain_Acquire.md#onposttransferasync)
Expand All @@ -206,20 +204,20 @@ function AcquireImage() {
}
```

Links to API Reference:
API Reference
- Dynamic Web TWAIN:
- [`SelectSourceAsync()`](/_articles/info/api/WebTwain_Acquire.md#selectsourceasync)
- [`AcquireImageAsync()`](/_articles/info/api/WebTwain_Acquire.md#acquireimageasync)

### 4.2 Add PDF Saving to Local Functionality
### 4.2 Add PDF Saving to Local Functionality

Use the Dynamsoft Document Viewer saveToPdf API to convert the scanned document to a PDF Blob, then use the Dynamic Web TWAIN saveBlob API to export the document to local as a PDF.
Use `saveToPdf()` from **DDV** to convert the scanned document to a PDF Blob, then use `saveBlob` from **DWT** to export the document to local as a PDF.

```javascript
const pdfSettings = {
saveAnnotation: "annotation"
};
function SavePDFs(){
function SavePDF(){
editViewer.currentDocument.saveToPdf(pdfSettings).then(function(blob){
DWObject.IfShowFileDialog = true;
DWObject.saveBlob("WebTWAINImage.pdf", blob).then(function () {
Expand All @@ -231,7 +229,7 @@ function SavePDFs(){
}
```

Links to API Reference:
API Reference
- Dynamic Web TWAIN:
- [`IfShowFileDialog`](/_articles/info/api/WebTwain_IO.md#ifshowfiledialog)
- [`saveBlob()`](/_articles/info/api/WebTwain_IO.md#saveblob)
Expand All @@ -240,7 +238,7 @@ Links to API Reference:

### 4.3 Add Server Upload Functionality

Use the Dynamsoft Document Viewer saveToPdf API to convert the scanned document to a PDF Blob, then use the Dynamic Web TWAIN httpUploadBlob API to upload the document to the server as a PDF.
Use the `saveToPdf()` API from **DDV** to convert the scanned document to a PDF Blob, then use the `httpUploadBlob()` API from **DWT** to upload the document to the server as a PDF.
```javascript
// Can be discarded if already defined previously
const pdfSettings = {
Expand All @@ -266,7 +264,7 @@ function Upload(){
Links to related documentation:
- [`Uploading Images to the Server`](https://www.dynamsoft.com/web-twain/docs/getstarted/uploading.html)

Links to API Reference:
API Reference
- Dynamic Web TWAIN:
- [`httpUploadBlob()`](/_articles/info/api/WebTwain_IO.md#httpuploadblob)
- Dynamsoft Document Viewer:
Expand All @@ -279,14 +277,14 @@ Links to API Reference:
<html>
<head>
<title>HelloWorld</title>
<script src=" https://cdn.jsdelivr.net/npm/dwt@latest/dist/dynamsoft.webtwain.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/ddv.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/ddv.css ">
<script src=" https://cdn.jsdelivr.net/npm/dwt@19.1.0/dist/dynamsoft.webtwain.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@3.0.0/dist/ddv.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@3.0.0/dist/ddv.css">
</head>
<body>
<input type="button" value="Scan" onclick="AcquireImage();" />
<input type="button" value="Save PDF" onclick="SavePDFs();" />
<input type="button" value="Upload" onclick="Upload();" /> <br/>
<button onclick="AcquireImage();">Scan</button>
<button onclick="SavePDF();">Save PDF</button>
<button onclick="Upload();">Upload</button>
<div id="container" style="height:580px; width: 1000px;"></div>
</body>
<script type="text/javascript">
Expand All @@ -297,15 +295,12 @@ let DWObject, editViewer, ddvDoc;
// You can request a 30-day trial key from https://www.dynamsoft.com/customer/license/trialLicense/?product=dwtddv
let license = "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9";
Dynamsoft.DDV.Core.license = license;
Dynamsoft.DDV.Core.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/engine";
Dynamsoft.DDV.Core.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@3.0.0/dist/engine";
await Dynamsoft.DDV.Core.init();

// Enable image filtering
Dynamsoft.DDV.setProcessingHandler("imageFilter", new Dynamsoft.DDV.ImageFilter());
// Create a Dynamsoft Document Viewer Edit Viewer to display and edit documents scanned with Dynamic Web TWAIN
editViewer = new Dynamsoft.DDV.EditViewer({
container: "container",
uiConfig: Dynamsoft.DDV.getDefaultUiConfig("editViewer", {includeAnnotationSet: true})
container: "container"
});

// Create a Dynamsoft Document Viewer document to contain and display images scanned by Dynamic Web TWAIN
Expand All @@ -319,7 +314,7 @@ let DWObject, editViewer, ddvDoc;
// Create Dynamic Web TWAIN object
Dynamsoft.DWT.ProductKey = license;
Dynamsoft.DWT.UseDefaultViewer = false;
Dynamsoft.DWT.ResourcesPath = "https://cdn.jsdelivr.net/npm/dwt@latest/dist";
Dynamsoft.DWT.ResourcesPath = "https://cdn.jsdelivr.net/npm/dwt@19.1.0/dist";
// You need to set the service installer location here since the installer's size exceeds jsdelivr's limit. You'd better host the installers in your own environment.
Dynamsoft.DWT.ServiceInstallerLocation = 'https://download2.dynamsoft.com/Demo/DWT/Resources/dist/';

Expand Down Expand Up @@ -370,7 +365,7 @@ const pdfSettings = {
saveAnnotation: "annotation"
};

function SavePDFs(){
function SavePDF(){
editViewer.currentDocument.saveToPdf(pdfSettings).then(function(blob){
DWObject.IfShowFileDialog = true;
DWObject.saveBlob("WebTWAINImage.pdf", blob).then(function () {
Expand Down Expand Up @@ -408,4 +403,4 @@ function Upload(){
## Further Reading

- [`Use the API to edit images within the control`](https://www.dynamsoft.com/document-viewer/docs/features/viewers/editviewer.html#edit-pages)
- [`Use the API to delete or switch images within the control`](https://www.dynamsoft.com/document-viewer/docs/api/interface/idocument/index.html#members)
- [`Use the API to delete or switch images within the control`](https://www.dynamsoft.com/document-viewer/docs/api/interface/idocument/index.html#members)
Loading