How to Create Web-Based Scanner Software

Are you looking to create web-based scanner software to access scanners on client machines? If so, it’s important to remember there is no way for a web page to directly access local resources on client machines. So, to make this happen, you can use a TWAIN plugin.

Online Scan Demo of Dynamic Web TWAIN

In this article, I’ll show you how to use Dynamsoft’s Dynamic Web TWAIN SDK to create a web-based scanner program to allow end users to scan documents from a web page. After proper scanner programming, your users will be able to access the application from Internet Explorer, Chrome, Firefox, and Safari on Windows and Mac OS X machines.

Try out basic scan online demo

Developing a Simple Scan Page

You can follow the steps below to create a scan page to interact with scanners connected to client machines.

  1. Install Dynamic Web TWAIN on your machine. You can download a 30-day free trial here.
  2. Create a new HTML web page and name it scan.html. Then add Dynamic Web TWAIN control to the web page.
    • Include two Dynamic Web TWAIN JS files in thetag of the page. The JS files can be found under \Resources\ in the installation folder of Dynamic Web TWAIN. The JS files are:
      – dynamsoft.webtwain.initiate.js
      – dynamsoft.webtwain.config.js
      Here is sample code:

      <script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"> </script>
      <script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"> </script>
      
    • Next, add a container for Dynamic Web TWAIN to thetag. The scanned images will be shown in the container. Here is sample code too:
      <div id="dwtcontrolContainer"> </div>
  3. Now, add a scan button to the page. Then you can use the simple APIs provided by Dynamic Web TWAIN to scan images. Here is sample code for this too:
    <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>
    
  4. Now when you run the web page in a browser a user can click the “scan” button to see the connected scanner devices. They can then choose one and scan documents. You can try our basic scan online demo to see how this works.

By following these steps you will have implemented simple web scanner software for document scanning in HTML and JavaScript. If you want to save the images to a server machine, database, or document libraries, you can use the HTTP/HTTPS upload methods provided by Dynamic Web TWAIN. Also, use C#, VB.NET, PHP, JSP etc. to receive the image data on the server side.

Let us know in the comments section below if you have any questions about developing your web-based scanner software.

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.

Subscribename@email.com