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

interact with scanner in Angular JS

Last Updated on 2018-10-08

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">
    <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>
<h1>Dynamic Web TWAIN with AngularJS</h1>
            <div id="img"></div>
            <!-- 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>
            <div ng-controller="twainControl">
                <button ng-click="acquireImage()">Scan</button>
  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.
var app = angular.module('WebScanning', []);

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

Get source code on GitHub

git clone

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

Get AngularJS2 source code on GitHub

git clone

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe Newsletter

Subscribe to our mailing list to get the monthly update.