Document Scanning Using JavaScript and jQuery

Feb 27, 2014
Document Scanning Using JavaScript and jQuery

As we know, web client-side JavaScript code cannot interact with a document scanner directly. There is no JavaScript API available until Dynamsoft makes it come true. Dynamic Web TWAIN SDK, which is a browser-based document scanning SDK, supports JavaScript programming for scanners and digital cameras. With the SDK, it is easy to capture images and documents from web browsers.

In this tutorial, we will explain how to build a simple HTML page to scan documents and save them as a PDF file using Dynamic Web TWAIN SDK. We will also discuss how you scan multiple pages in a batch and save them as PDF, and how you can scan paper documents into searchable PDF files with OCR in a web application.

Basic features of Dynamic Web TWAIN SDK

  • Compatible with Internet Explorer (32 bit or 64 bit), Edge, Chrome, Firefox, Safari on both Windows, macOS, and Linux
  • Supports image capture and border crop from mobile cameras
  • Support TWAIN scanners, digital cameras & other TWAIN devices
  • Support basic edit operations, including rotate, crop, mirror, flip, erase, etc.
  • Save the scanned images to local disk, web server, database, SharePoint document library, and more

Learn more about Dynamic Web TWAIN >

Implement Document Scanning with JavaScript

  1. Start a Web Application
  2. Add Dynamic Web TWAIN to the HTML Page
  3. Use Dynamic Web TWAIN to Scan or Load Images
  4. Save Images as a PDF file

Step 1: Start a Web Application

Download the free Dynamic Web TWAIN 30-day trial.

After your installation, you can find it by default at C: > Program Files > (x86) > Dynamsoft > Dynamic Web TWAIN SDK {version number} Trial.

Download SDK: Dynamic Web TWAIN

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

ResourcesFolder

2. Create an empty HTML page

Please put the empty HTML page together with the Resources folder, as shown below:

ResourcesAndHTML

Step 2. Add Dynamic Web TWAIN to the HTML Page

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. 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.

Step 3: Use Dynamic Web TWAIN to Scan or Load Images

Add Scan and Load buttons to the page:

<input type="button" value="Scan" onclick="AcquireImage();" />

<input type="button" value="Load" onclick="LoadImage();" >

And add the implementation of function AcquireImage() and LoadImage(). Notice how LoadImage() handles success and failure with callback functions OnSuccess() and OnFailure() :

function AcquireImage() {
if (DWObject) {
DWObject.SelectSource();
DWObject.OpenSource();
DWObject.IfDisableSourceAfterAcquire = true; // Scanner source will be disabled/closed automatically after the scan.
DWObject.AcquireImage();
}
}

//Callback functions for async APIs
function OnSuccess() {
console.log('successful');
}

function OnFailure(errorCode, errorString) {
alert(errorString);
}

function LoadImage() {
if (DWObject) {
DWObject.IfShowFileDialog = true; // Open the system's file dialog to load image
DWObject.LoadImageEx("", EnumDWT_ImageType.IT_ALL, OnSuccess, OnFailure); // Load images in all supported formats (.bmp, .jpg, .tif, .png, .pdf). OnSuccess or OnFailure will be called after the operation
}
}

Now we have two options to get documents loaded into Dynamic Web TWAIN:

  • Scan documents from a scanner (AcquireImage());
  • Or load hard disk documents (LoadImage()).

Step 4: Save Images as a PDF file

Let’s add a save button to the web page:

<input type="button" value="Save" onclick="SaveWithFileDialog();" />

Add the logic of saving documents to PDF:

function SaveWithFileDialog() {
if (DWObject) {
if (DWObject.HowManyImagesInBuffer > 0) {
DWObject.IfShowFileDialog = true;
DWObject.SaveAllAsPDF("DynamicWebTWAIN.pdf", OnSuccess, OnFailure);
}
}
}

Now, save the file.

That’s it. Congratulations. You have just built a web page in around 5 minutes that can scan or load documents and save them as a PDF file.

You can open scan2pdf.html in a browser and test it out.

You can either load a local document or scan documents into your web page. Let’s try scanning. This is how the page looks like when the Scan button is clicked:

Dynamic Web TWAIN scan page

Please note that only TWAIN-compatible scanners will be listed in the Select Source dialog. If you don’t have a real scanner at hand, you can install a virtual scanner for the testing, which is what I did. If you do have a scanner, but it doesn’t show up in the list, please chat with our tech support for a solution.

After a sample page is scanned, it looks something like this:
Dynamic Web TWAIN scan page after scanning

And yes, you can save it as a PDF file by clicking the Save button.

One Step Further

The example above is simple and functions well. But sometimes, you may like to take things a step further. For example, how about automatically saving documents as a PDF without having to manually click the save button?

With Dynamic Web TWAIN’s event mechanism, it’s actually fairly easy to do.

Dynamic Web TWAIN offers a number of events for users to subscribe to. Events are triggered when certain trigger points are reached. For example, we have an click event for mouse clicking, an OnPostTransfer event for the end of transferring one image, etc.

So at the end of function Dynamsoft_OnReady(), simply add:

if (DWObject) {
DWObject.RegisterEvent('OnPostAllTransfers', SaveWithFileDialog);
}

This will do the job.

Scan Documents and Use barcodes as Batch Separators

What if you want to scan documents in a batch and then save them as PDF? Or, how to automatically separate different files in one batch? 

We recommend you first give this web demo a try. 

Scan multi-pages to PDF Online Demo

The demo application enables users to scan documents from TWAIN scanners and MFPs (Multi-Function Printer). They can save them as PDF files, either one-page PDF or multi-page PDF. Also, it utilizes barcodes as batch separators. If there is a barcode detected on the page, a new file will be created with the barcode value being the filename.

Subscribe Newsletter

Subscribe to our mailing list to get the monthly update.

Subscribename@email.com