11 Years of Experience in TWAIN SDKs and Version Control Solutions
Tel: 1-877-605-5491
How to Upgrade?
Developer's Guide (PDF)

Build a scan page in five minutes


The following 3 steps will show you how to quickly create your first web-based scan application.

  1. 1

    Start a Web Application

    1. 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}\

    2. 1.2 Create an empty HTML page

      Please put the empty html page under the same folder level as the Resources folder, as shown below:

  2. 2

    Add Dynamic Web TWAIN to the HTML Page

    1. 2.1 Include the two Dynamsoft's JS files in the <head> tag. 

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

    2. 2.2 Add Dynamic Web TWAIN container to the <body> tag. 

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

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

  3. 3

    Use Dynamic Web TWAIN

    1. 3.1 Add a Scan button and the minimum scripts to scan 

      1. <input type="button" value="Scan" onclick="AcquireImage();" />
      2. <script type="text/javascript"> 
      3.     function AcquireImage(){
      4.         var DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
      5.         DWObject.IfDisableSourceAfterAcquire = true;
      6.         DWObject.SelectSource();
      7.         DWObject.OpenSource();
      8.         DWObject.AcquireImage();
      9.     }
      10. </script>

    2. 3.2 Review the complete code. 

      1. <html>  
      2.     <head>    
      3.         <title>Hello World</title>
      4.         <script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"> </script>
      5.         <script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"> </script>
      6.     </head>
      7.   
      8.     <body>
      9.         <input type="button" value="Scan" onclick="AcquireImage();" />
      10.         <div id="dwtcontrolContainer"> </div>
      11.         <script type="text/javascript"> 
      12.             function AcquireImage(){
      13.                 var DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
      14.                 DWObject.IfDisableSourceAfterAcquire = true;
      15.                 DWObject.SelectSource();
      16.                 DWObject.OpenSource();
      17.                 DWObject.AcquireImage();
      18.             }
      19.         </script>
      20.     </body>  
      21. </html>

      Download Now
      30-day free trial