Atalasoft Bower

Atalasoft Web Capture Service

Atalasoft Web Capture Service repository is for distribution on Bower.

Installation

You can install this package locally with bower.io.

# To get the latest stable version, use bower from the command line.
bower install web-capture-service

# To get the specific 10.7.0 version use:
bower install web-capture-service#10.7.0

# To save the bower settings for future use:
bower install web-capture-service --save

# Later, you can use easily update with:
bower update

Note that web-capture-service requires Jquery package as dependency.

Using web-capture-service

Here is a sample on how to create a client-side view for web-capture-service using web-document-viewer. All installed dependencies should be referenced in the head section.

<!DOCTYPE html>
<html>
<head>
    <title>Atalasoft Web Capture Service</title>

    <!-- Script includes for Web Viewing and Scanning -->
    <script src="bower_components/jquery/jquery.min.js" type="text/javascript"></script>
    <script src="bower_components/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
    <script src="bower_components/web-document-viewer/atalaWebDocumentViewer.js" type="text/javascript"></script>
    <script src="bower_components/web-capture-service/atalaWebCapture.js" type="text/javascript"></script>

    <!-- Style for Web Viewer  -->
    <link href="bower_components/jquery-ui/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <link href="bower_components/web-document-viewer/atalaWebDocumentViewer.css" rel="stylesheet" type="text/css" />   

    <script src="Scripts/app.js" type="text/javascript"></script>
</head>
<body>
    <h1>Kofax Web Capture - Web Scan Demo</h1>
    <table>
        <tr>
            <td style="vertical-align:top;">
                <!--Web Document Viewer-->
                <div>
                    <div class="atala-document-toolbar" style="width: 670px; vertical-align:middle"></div>
                    <div class="atala-document-container" style="width: 670px; height: 500px;"></div>
                </div>
            </td>
            <td style="vertical-align:top;">
                <div>
                    Select Scanner: <select class="atala-scanner-list" disabled="disabled" id=" ScannerList" name="scannerList" style="width:194px">
                        <option selected="selected">(no scanners available)</option>
                    </select>
                    <input type="button" class="button"  value="Scan" id="Scan" onClick="scanWithSettings()"/>
                    <input type="button" class="atala-local-file-import-button cbutton" value="Import file" />
                </div>
                <!--Scan & VRS Settings-->
                <div>
                    <h2>Scan Options:</h2>
                    <table>
                        <tr>
                            <td>showScannerUI:</td>
                            <td>
                                <select id="showScannerUI">
                                    <option>(blank)</option>
                                    <option>true</option>
                                    <option selected="selected">false</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>dpi:</td>
                            <td>
                                <select id="dpi">
                                    <option>100</option>
                                    <option selected="selected">200</option>
                                    <option>300</option>
                                    <option>400</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>paperSize:</td>
                            <td>
                                <select id="paperSize">
                                    <option>(blank)</option>
                                    <option>-1 (No Pref)</option>
                                    <option selected="selected">0 (None/Max)</option>
                                    <option>1 (A4)</option>
                                    <option>2 (B5/JISB5)</option>
                                    <option>3 (US Letter)</option>
                                    <option>4 (US Legal)</option>
                                    <option>5 (A5)</option>
                                    <option>6 (B4)</option>
                                    <option>7 (B6)</option>
                                    <option>9 (US Ledger)</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>pixelType:</td>
                            <td>
                                <select id="pixelType">
                                    <option>(blank)</option>
                                    <option>-1 (No Pref)</option>
                                    <option>0 (BW)</option>
                                    <option>1 (Grayscale)</option>
                                    <option selected="selected">2 (Color)</option>
                                </select>
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

The app.js file, mentioned above, should be created and placed in the 'Scripts' folder. It contains some business logic for Atalasoft components initialization, event handlers and helper functions:

// Initialize Web Scanning and Web Viewing
$(function () {
  try {
    // Initialize Web Document Viewer
    var viewer = new Atalasoft.Controls.WebDocumentViewer({
      parent: $('.atala-document-container'),
      toolbarparent: $('.atala-document-toolbar'),
      allowannotations: false,
      serverurl: 'WebDocViewerHandler.ashx'
    });
    
    // Initialize Web Scanning
    Atalasoft.Controls.Capture.WebScanning.initialize({
      handlerUrl: 'WebCaptureHandler.ashx',
      onScanClientReady: function (eventName, eventObj) {
        console.log("Scan Client Ready");
        //Set encryption key for scan/import results located in persistent store in the UserProfile folder
        Atalasoft.Controls.Capture.WebScanning.LocalFile.setEncryptionKey("foobar");
      },
      onScanStarted: function (eventName, eventObj) { console.log('Scan Started'); },
      onScanCompleted: function (eventName, eventObj) { console.log('Scan Completed: ' + eventObj.success); },
      onImportCompleted: function (eventName, eventObj) { console.log('Import Completed: ' + eventObj.success); },
      onImageAcquired: function (eventName, eventObj) {
        console.log("Image Acquired");
        // Remove image from memory
        eventObj.discard = true;
        // Use LocalFile API for upload scan result to server with specified settings
        Atalasoft.Controls.Capture.WebScanning.LocalFile.asBase64String(eventObj.localFile,
          "jpg",
          {
            quality: 5
          },
          function (data) { Atalasoft.Controls.Capture.UploadToCaptureServer.uploadToServer(data); });
      },
      onUploadError: function (msg, params) { console.log(msg); },
      onUploadStarted: function (eventName, eventObj) { console.log('Upload Started'); },
      onUploadCompleted: function (eventName, eventObj) {
        console.log('Upload Completed: ' + eventObj.success);
        if (eventObj.success) {
          console.log("atala-capture-upload/" + eventObj.documentFilename);
          viewer.OpenUrl("atala-capture-upload/" + eventObj.documentFilename);
          Atalasoft.Controls.Capture.CaptureService.documentFilename = eventObj.documentFilename;
        }
      },
        
      // Default scanning options used for Import operation.
      scanningOptions: { resultPixelType: 2, deliverables: { localFile: { format: "tif" } } }
    });
  } catch (error) {
    console.log("Thrown error: " + error.description);
  }
});

function scanWithSettings() {
  Atalasoft.Controls.Capture.WebScanning.scanningOptions = collectScanSettings();
  console.log("scanningOptions: ");
  console.log(Atalasoft.Controls.Capture.WebScanning.scanningOptions);
  Atalasoft.Controls.Capture.WebScanning.scan();
}

function collectScanSettings() {
  var scanningOptions = { resultPixelType: 2 };
  var options = {
      pixelType: 1,
      showScannerUI: 0,
      dpi: 1,
      paperSize: 1
  };
  var value;
  for (param in options) {
      value = $('#' + param).val();
      if (value != "" && value != "(blank)") {
          if (!isNaN(parseInt(value))) {
              value = parseInt(value);
          }
          param = param.replace('_', '.');
          if (value == "true") value = true;
          if (value == "false") value = false;
          scanningOptions[param] = value;
      }
  }
  return scanningOptions;
}

WebDocViewerHandler.ashx as a serverurl is the name of the class inherited from WebCaptureRequestHandler [C#]. And WebCaptureHandler.ashx as a handler serverUrl is the name of the class inherited from WebDocumentRequestHandler [C#]. More details about this code you can find in the NuGet Tutorial II - Web Capture Service. The only difference is the package source.

Licensing

To run the projects locally, you need to have a DotImage license. There are various way to acquire the license:

Web Capture Service object cross browser client-side script. Copyright 2003-2016 Atalasoft Inc. All Rights Reserved.

This source code is property of Atalasoft, Inc. (http://www.atalasoft.com/) Permission for usage and modification of this code is only permitted with the purchase of a source code license.

Related Articles