How to Create a Web Scanning Solution with Dynamic Web TWAIN and AngularJS

interact with scanner in Angular JS

AngularJS is a Web application framework for rendering dynamic Web content with MVC architecture. It reduces the amount of JavaScript code with the feature of two-way data binding. More and more developers tend to use AngularJS for client-side development.

In this article, we will share how to use a cross-browser cross-platform document scanning SDK called Dynamic Web TWAIN SDK together with AngularJS 1 to create a simple Web application for document scanning.

Create a Web Scanning App with AngularJS 1 & Dynamic Web TWAIN

You can follow the steps below to use Dynamic Web TWAIN and AngularJS 1 to create a Web scanning application.

  1. Download Dynamic Web TWAIN SDK and angular.js.
  2. Copy Resources folder under the installation folder and HelloWorld.html from {Dynamic Web TWAIN SDK}Started to your new project.
  3. Open HelloWorld.html and add Angular directives to HTML elements.
<!DOCTYPE html>
<html ng-app="WebScanning">
<head>
    <title>Dynamic Web TWAIN with AngularJS</title>
    <link rel="stylesheet" href="css/dwt.css">
    <script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"> </script>
    <script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"> </script>
    <script type="text/javascript" src="js/angular.js"> </script>
    <script type="text/javascript" src="js/twain.js"> </script>
</head>
 
<body>
<h1>Dynamic Web TWAIN with AngularJS</h1>
 
<table>
    <tr>
        <td>
            <div id="img"></div>
        </td>
    </tr>
    <tr>
        <td>
            <!-- dwtcontrolContainer is the default div id for Dynamic Web TWAIN control.
           If you need to rename the id, you should also change the id in dynamsoft.webtwain.config.js accordingly. -->
            <div id="dwtcontrolContainer"></div>
        </td>
    </tr>
 
    <tr>
        <td>
            <div ng-controller="twainControl">
                <button ng-click="acquireImage()">Scan</button>
            </div>
        </td>
    </tr>
</table>
 
</body>
</html>
  1. Put relevant JavaScript code in twain.js.
function twainControl($scope) {
    $scope.acquireImage = function() {
        var DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer'); // Get the Dynamic Web TWAIN object that is embeded in the div with id 'dwtcontrolContainer'.
        DWObject.IfDisableSourceAfterAcquire = true;    // Source will be closed automatically after acquisition.
        DWObject.SelectSource();                        // Select a Data Source (a device like scanner) from the Data Source Manager.
        DWObject.OpenSource();                          // Open the source. You can set resolution, pixel type, etc. after this method. Please refer to the sample 'Scan' -> 'Custom Scan' for more info.
        DWObject.AcquireImage();
    };
}
 
var app = angular.module('WebScanning', []);
app.controller('twainControl',twainControl);

Using AngularJS, the code becomes much cleaner and more readable.

Get source code on GitHub

git clone https://github.com/DynamsoftRD/DWT-with-Web-App-Framework.git

If you are using AngularJS 2, get the below sample code instead.

Get AngularJS2 source code on GitHub

git clone
https://github.com/dynamsoft-dwt/Scan-Documents-with-AngularJS2.git

Subscribe Newsletter

Subscribe to our mailing list to get the monthly update.

Subscribename@email.com