Build the “Hello World” Scan Page

NOTE: Before you start, please make sure you’ve downloaded and installed the latest version of Dynamic Web TWAIN. If you haven’t done so, you can get the 30-day free trial here.

The following 3 steps will show you how to create your first web-based scanning application in just 5 minutes!

Step 1: Start a Web Application

1.1 Copy the Dynamsoft's Resources folder to your project

The Resources folder can normally be copied from C:\Program Files (x86)\Dynamsoft\Dynamic Web TWAIN SDK {Version Number} {Trial}\image003

1.2 Create an empty HTML page

Please put the empty html page together with the Resources folder, as shown below:image004

Step 2: Add Dynamic Web TWAIN to the HTML Page

2.1 Include the two Dynamsoft JS files

<script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"> 
<script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js">

2.2 Add a Dynamic Web TWAIN container

<div id="dwtcontrolContainer">

Note: "dwtcontrolContainer" is the default id for the div. You can change it in the file dynamsoft.webtwain.config.js if necessary.

Step 3: Use Dynamic Web TWAIN

3.1 Add a Scan button and the minimum script for it

<input type="button" value="Scan" onclick="AcquireImage();" />
<script type="text/javascript">
    var DWObject;
    function Dynamsoft_OnReady(){
        DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
    }
    function AcquireImage(){
        if(DWObject) {
            DWObject.IfDisableSourceAfterAcquire = true;
            DWObject.SelectSource();
            DWObject.OpenSource();
            DWObject.AcquireImage();
        }
    }
</script>

3.2 Review the completed code

<html>
<head>
<title>Hello World</title>
<script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"> </script>
<script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"> </script>
</head>
<body>
<input type="button" value="Scan" onclick="AcquireImage();" />
<div id="dwtcontrolContainer"> </div>
<script type="text/javascript">
        var DWObject;
        function Dynamsoft_OnReady(){
            DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
        }
        function AcquireImage(){
            if(DWObject) {
                DWObject.IfDisableSourceAfterAcquire = true;
                DWObject.SelectSource();
                DWObject.OpenSource();
                DWObject.AcquireImage();
            }
        }
    </script>
</body>
</html>

3.3 See the scan page in action

If you open the Hello World page in your project, it should look like this:image005

Now, you can click on the Scan button to select a device, as shown below:

image006

NOTE:

  1.  Only TWAIN compatible devices are listed in the Select Source dialog. If your connected scanner is not shown in the list, please follow this article to troubleshoot.
  2.  If you don’t have a real scanner at hand, you can install the Virtual Scanner – a scanner simulator which is developed by the TWAIN Working Group – for testing purposes.

Once scanning is done, image(s) will show up in the built-in Dynamic Web TWAIN viewer:

image007

If you have installed the 30-day trial version of Dynamic Web TWAIN, you can find the complete Hello World application at C:\Program Files (x86)\Dynamsoft\Dynamic Web TWAIN SDK {Version Number} {Trial}\Samples\Getting Started\.

image008

As you can see, there are many other sample applications (source code provided) available for you to explore more features of Dynamic Web TWAIN. Enjoy!

Is this page helpful?

Leave a Reply

Your email address will not be published.