Use DWT with Angular
Angular is one of the most popular and mature JavaScript frameworks. Check out the following on how to implement DWT
into an Angular application.
Preparation
Make sure you have node and Angular CLI installed. node 14.4.0
and Angular CLI 9.1.12
are used in the example below.
Create the sample project
Create an out-of-the-box raw Angular application
ng new dwt-angular
CD to the root directory of the application and install the dependencies
// version 16.1 + recommended
npm install dwt
npm install @types/dwt
Note: For 16.2+, the types are now included in the dwt NPM package under dwt\dist\types
Configure the project
Open angular.json
and add the following lines to "build"/"options"/"assets"
.
These lines will copy the static files necessary to run
DWT
to the resulting project.
{
"glob": "**/*",
"input": "./node_modules/dwt/dist",
"output": "assets/dwt-resources"
}
Start to implement
Generate a component
ng generate component dwt
Edit the component
- In
dwt.component.html
add a button and aHTMLDIVElement
.
<button (click)="acquireImage()">Acquire Images</button>
<div id="dwtcontrolContainer"></div>
- In
dwt.component.ts
add code to initializeDWT
.
import Dynamsoft from 'dwt';
containerId = "dwtcontrolContainer";
ngOnInit(): void {
Dynamsoft.WebTwainEnv.Containers = [{
WebTwainId: 'dwtObject',
ContainerId: this.containerId,
Width: '300px',
Height: '400px'
}];
Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', () => {
this.Dynamsoft_OnReady();
});
Dynamsoft.WebTwainEnv.ProductKey = 'YOUR-PRODUCT-KEY';
Dynamsoft.WebTwainEnv.ResourcesPath = 'assets/dwt-resources';
Dynamsoft.WebTwainEnv.Load();
}
Note:
containerId
specifies theHTMLDIVElement
to createDWT
viewer in.OnWebTwainReady
is the callback triggered when the initialization succeeds.ProductKey
must be set to a valid trial or full key.ResourcesPath
is set to the location of the static files mentioned in Configure the project.
- Get a handler of the
WebTwain
instance.
Use the method Dynamsoft.WebTwainEnv.GetWebTwain()
to get a handler of the created WebTwain
instance.
import { WebTwain } from 'dwt/WebTwain';
DWObject: WebTwain = null;
Dynamsoft_OnReady() {
this.DWObject = Dynamsoft.WebTwainEnv.GetWebTwain(this.containerId);
}
- Define the function
acquireImage()
.
acquireImage() {
this.DWObject.AcquireImage();
}
- Add the component to
app.component.html
.
Edit the file app.component.html
to contain nothing but the following
<app-dwt></app-dwt>
- Try running the project.
ng serve -o
If you have installed
DWT
and have configured a validProductKey
. You will have a working page to scan documents from your scanner now. Otherwise, you should see instructions on the page that guide you to install the library. More info».
Official Samples
Check out the following two sample projects: