Develop a document scanning application using Dynamic Web TWAIN

Are you getting too many paper documents and want to develop a document scanning application to better manage them? Dynamic Web TWAIN will make the job easy for you. With the TWAIN interface, you can enable users scan documents, edit and upload them to local disk, web server, database or cloud via your website.

Have a quick play with the online demo of Dynamic Web TWAIN to see how it works.

How to develop my document scanning application using Dynamic Web TWAIN?

Dynamic Web TWAIN is a client-side scanner programming SDK. You can use JavaScript to call its methods/properties. It comes with three editions – ActiveX, Plugin and HTML5- that work with all mainstream browsers on Windows, macOS, and Linux.

Download free trial

If you don’t have Dynamic Web TWAIN on your machine, please download the 30-day free trial first.

Create the scan page

First, let’s create a scan page – say “Scan.htm”. You can open it in your preferred text editor.

Add two divs:

“dwtcontrolContainer”  – To contain the Dynamic Web TWAIN object
“DWTNonInstallContainerID” – To show messages for end users when Dynamic Web TWAIN is not installed

<!--This is where Dynamic Web TWAIN control will be rendered.--> 
	<div id="dwtcontrolContainer"> 
	<div id="DWTContainerID" style="position: relative;" class='divcontrol'> 
	</div> 
	<div id="DWTNonInstallContainerID" style="width: 580px"> 
	</div> 
	</div>

Check the OS/Browser Type and Load Corresponding Web TWAIN Edition

To work with different browsers – IE (x86 or x64), Chrome, Firefox, Safari – on Windows and Mac, we need to check the current browser and OS type which the end users is currently using and load the corresponding Dynamic Web TWAIN edition.

To save you time, we have worked out this part of code. You can just download DWT_BasicPageInitiate.js  and reference to it  in your Scan page like this:

<script type="text/javascript" language="javascript" src="Scripts/DWT_BasicPageInitiate.js"></script>

Acquire image from scanner

Now we can call the AcquireImage method of Dynamic Web TWAIN to acquire images from your scanner with TWAIN driver.

You can do that with several lines of code.

In Scan.htm, add a Scan button and trigger scanning on buttonclick.

<input id="btnScan" type="button" value="Scan" onclick="DW_AcquireImage();" />

And you can acquire an image using the following JavaScript code:

<script language="javascript" type="text/javascript"> 
function DW_AcquireImage() {
    DWObject.SelectSource(); //show the available TWAIN sources
    DWObject.CloseSource();
    DWObject.OpenSource();
    DWObject.IfShowUI = false; //hide the user interface of the source
    DWObject.PixelType = 1; //scan the document in gray
    DWObject.Resolution = 200; //scan at resolution 200
    DWObject.IfDisableSourceAfterAcquire = true;
    DWObject.AcquireImage(); 
}
</script>

Test scanning

You have now built a web page for scanning now.  Pretty easy right?

To test it, you can open Scan.htm in your browser (IE, Chrome, Firefox or Safari). Click Scan button and it will show all the available TWAIN devices on your machine and you can choose one to scan a document.

You can also test with the online demo here with basic scanning feature.

To get more samples of Dynamic Web TWAIN, including image edit, upload to web server/database in C#, VB.NET, PHP, JSP and more, please visit the sample page.

  • Edilberto Durano

    This is great! I’m going to try this document scanning application.
    Ed of DocuScanAmerica

Subscribe Newsletter

Subscribe to our mailing list to get the monthly update.

Subscribename@email.com