Build a Web Page to Scan Documents Online with Minimal JavaScript Coding

Want to build a web page to scan documents online? Well, you have arrived at the right spot! This blog will introduce you to a technology that will help cut extensive development time and effort. So, without further ado, let's get started.

How to Quickly Build a Web Page to Scan Documents Online?

To build a web page on your own to scan documents in a web browser, you'll either have to develop a module from scratch or choose a document scanning SDK. The latter is a better option as it eliminates the need to perform complex coding and saves time and effort.

Choosing the Right Document Scanner SDK

Document scanners cannot be directly accessed by a web page like a web camera. Hence, it requires a bridge to communicate with scanners. The TWAIN scanning protocol is the most preferred and recommended when working with document scanners.

Choosing the correct document scanner SDK may be challenging for you, with so many available options. The below parameters will help make your selection easier.

Easy Integration: The document scanner SDK you choose must be easy to integrate. Building a document scanning module for your website should not take more than a few lines of JavaScript code. Hence, you must choose the one that is easy to integrate.
Supported OS, Browsers, and Technology: Are you using a Windows system or a MacBook? Which browser are you using? Is it Safari, Chrome, or Firefox? Select a document scanner SDK that supports a wide range of OS and browsers.
Fast Speed: Speed is another crucial aspect you may want to consider while looking for a document scanner SDK for the web. The top ones can scan thousands of documents in a single session. Choosing such options will save you time and effort.
Sharing and Downloading Options: For easy sharing and downloading, ensure the document scanner SDK that you choose supports formats such as JPEG, BMP, PNG, PDF, and TIFF files.
Basic Editing Features: You wouldn't want to use a separate document editor to make fundamental changes such as crop, mirror, flip, erase, rotate, etc. Hence, look for a document scanner SDK with built-in basic image editing interfaces.
Robust Security Features: Even if you use the document scanner SDK for personal use, you cannot compromise the security part. Hence, look for standard security features such as data encryption, built-in HTTPS support, digital signature, authorization access for accessing local files, etc.

Considering these features, you can easily choose the perfect document scanner SDK for your requirements. Also, try online demos and perform detailed analyses to make an informed decision. You may also compare multiple options and finalize the best per your needs.

Building a Web Page with a Document Scanner SDK

Let's learn how to build a web page with a document scanning SDK to scan documents online. Here, we have used Dynamsoft's Dynamic Web TWAIN SDK. It is very easy to use and implement.

Step 1: To configure the license key, open /Resources/dynamsoft.webtwain.config.js

Dynamsoft.DWT.ProductKey = 'LICENSE KEY';

Step 2: Now, you'll need to copy /Resources to the static resource folder of your web project.

Step 3: In this step, you'll have to make an index.html file. The code snippet explains how to scan documents from cameras or scanners.

<!DOCTYPE html>
 <html>

 <head>
     <title>Scan Document from Scanner</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="acquireScanner();" />

     <div id="container"></div>

     <script type="text/javascript">
         var scannerObj;
         Dynamsoft.DWT.CreateDWTObjectEx({
             WebTwainId: 'scanner',
             UseLocalService: true,
         }, function (obj) {
             scannerObj = obj;
             scannerObj.Viewer.bind(document.getElementById('container'));
             scannerObj.Viewer.width = 480;
             scannerObj.Viewer.height = 640;
             scannerObj.Viewer.show();
         }, function (ec, es) {
             console.log(es);
         });

         function acquireScanner() {
             if (scannerObj) {
                 var OnacquireScannerSuccess, OnacquireScannerFailure;
                 OnacquireScannerSuccess = OnacquireScannerFailure = function () {
                     scannerObj.CloseSource();
                 };

                 scannerObj.SelectSource();
                 scannerObj.OpenSource();
                 scannerObj.IfDisableSourceAfterAcquire = true;
                 scannerObj.AcquireImage(OnacquireScannerSuccess, OnacquireScannerFailure);
             }
         }
     </script>
 </body>
 </html>

Let's build an index2.html file.

<!DOCTYPE html>
 <html>

 <head>
     <title>Use Dynamic Web TWAIN to Scan from Camera</title>
     <script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"></script>
     <script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"></script>
     <script type="text/javascript" src="Resources/addon/dynamsoft.webtwain.addon.camera.js"></script>
 </head>

 <body>
     <div id="container" style="width: 720px;height:720px"></div>

     <script type="text/javascript">
         var cameraObj;
         Dynamsoft.DWT.CreateDWTObjectEx({
             WebTwainId: 'camera',
             UseLocalService: false
         }, function (obj) {
             cameraObj = obj;
             cameraObj.Viewer.bind(document.createElement('div'));
             cameraObj.Addon.Camera.scanDocument({
                 element: document.getElementById("container"),
                 scannerViewer: {
                     fullScreen: true
                 }
             }).then(
                 function () { console.log("OK"); },
                 function (error) { console.log(error.message); });

         }, function (ec, es) {
             console.log(es);
         });

     </script>
 </body>

 </html>

To control the API behavior, the boolean parameter UseLocalService is utilized. Setting it to 'true' would allow the SDK to communicate with the local Dynamsoft service to acquire images from scanners. When it is set to 'false,' the SDK would directly call JavaScript APIs to capture camera images.

Using the Document Scanning Widget

The scanDocument() API builds a full-functional widget that supports triggering document edge detection, setting camera resolution, images from local storage, loading switching between the rear and front cameras, managing multiple documents, and auto-capturing documents.

Entering the document management viewer will allow you to save and edit documents. To all auto-captured documents, perspective correction is applied in the viewer. You can also use filters if the document quality is not that great.

Blog

Build a Web Page to Scan Documents Online with Minimal JavaScript Coding

Eric Parker 🥂

How to Quickly Build a Web Page to Scan Documents Online?

Choosing the Right Document Scanner SDK

Building a Web Page with a Document Scanner SDK

Join Our Newsletter. No Spam, Only the good stuff.

Related