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.

      <script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"> </script>
      <script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"> </script>
    2. 2.2 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 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

      <input type="button" value="Scan" onclick="AcquireImage();" />
      <script type="text/javascript"> 
          function AcquireImage(){
              var DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
              DWObject.IfDisableSourceAfterAcquire = true;
              DWObject.SelectSource();
              DWObject.OpenSource();
              DWObject.AcquireImage();
          }
      </script>
    2. 3.2 Review the complete 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"> 
                  function AcquireImage(){
                      var DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
                      DWObject.IfDisableSourceAfterAcquire = true;
                      DWObject.SelectSource();
                      DWObject.OpenSource();
                      DWObject.AcquireImage();
                  }
              </script>
          </body>  
      </html>

      Download Now
      30-day free trial