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 show you how to create your first web-based scanning application in just 5 minutes!

Step 1: Start a Web Application

Copy the Dynamsoft Resources folder to your project

You can typically find the Resources folder in C:\Program Files (x86)\Dynamsoft\Dynamic Web TWAIN SDK {Version Number} {Trial}\

Build-the-Hello-World-Scan-Page-1

Create an empty HTML page

Put an empty HTML page together with the Resources folder, as shown below

Build-the-Hello-World-Scan-Page-2

Step 2: Add Dynamic Web TWAIN to the HTML Page

Include the two Dynamsoft JS files in the <head> tag

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

Add Dynamic Web TWAIN container to the <body> tag

<div id="dwtcontrolContainer"></div>

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

Add a Scan button and the minimum code to scan

<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.SelectSource(function () {
                DWObject.OpenSource();
                DWObject.AcquireImage();
            },
            function () {console.log("SelectSource failed!"); });
        }
    }
</script>

Review the completed code

<html>
<head>
    <title>Hello World</title>
    <script src="Resources/dynamsoft.webtwain.initiate.js"> </script>
    <script 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.SelectSource(function () {
                    DWObject.OpenSource();
                    DWObject.AcquireImage();
                },
                function () {console.log("SelectSource failed!"); });
            }
        }
    </script>
</body>
</html>

See the scan page in action

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

Build-the-Hello-World-Scan-Page-3

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

Build-the-Hello-World-Scan-Page-4

NOTE:

  • Only TWAIN|ICA|SANE-compliant devices are listed in the Select Source dialog. If your connected scanner doesn't show up in the list, please make sure the proper driver is installed.

  • If you are using Windows and 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 the scanning is done, image(s) will show up in the built-in Dynamic Web TWAIN viewer:

Build-the-Hello-World-Scan-Page-5

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

Build-the-Hello-World-Scan-Page-6

As you can see, there are lots of samples there (source code provided) for you to try out the many features of Dynamic Web TWAIN. You can also find advanced samples on the online sample gallery.

results matching ""

    No results matching ""

    results matching ""

      No results matching ""