Acquire images from TWAIN scanner in React.js application

In This Topic

This tutorial shows how to create a new React.js application allowing to acquire images from TWAIN scanner.

Here are steps, which must be done:

Install Node.js and npm client to your computer.
- You need Node.js to create React.js application. Please install Node.js to your computer if Node.js is not installed on your computer.
- The Node.js installer will also install the npm client by default.
Create a new React.js application.
- Create a new React.js application using the following console command:
  - Console
  npx create-react-app vintasoft-web-twain-react
- Go to the created project directory using the following console command:
  - Console
  cd vintasoft-web-twain-react

Copy Vintasoft JS- and TS-files to the React.js application.

Add the dependency to the npm-package 'vintasoft-web-twain-js' using the following console command:
- Console
```
npm install vintasoft-web-twain-js
```
Copy Vintasoft.Shared.js and Vintasoft.Twain.js files from folder "node_modules\vintasoft-web-twain-js\dist\" to the folder "public\".

Add references to Vintasoft JavaScript files to the "public\index.html" file:

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app"/>
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
-->
    <title>React App</title>

    <script src="Vintasoft.Shared.js" type="text/javascript"></script>
    <script src="Vintasoft.Twain.js" type="text/javascript"></script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
-->
  </body>
</html>

Create VintasoftWebTwain component in React.js application.

Create the folder "src\components" using the following console command:
- Console
```
mkdir src\components
```

Create "src\components\VintasoftWebTwain.js" file and add the component code (an image element, which displays an image acquired from TWAIN scanner; JavaScript code, which acquires an image from TWAIN scanner and displays the scanned image) to the "src\components\VintasoftWebTwain.js" file:

JavaScript

import React, { Component } from 'react';

export class VintasoftWebTwain extends Component {
    static displayName = VintasoftWebTwain.name;

    render() {
        return (
            <div htmlclass="mainDiv">
                <h1>React.js VintaSoft Web TWAIN</h1>
                <label htmlFor="twainDeviceList">TWAIN devices:</label>
                <select id="twainDeviceList"></select><br />
                <br />
                <input type="button" id="acquireImagesFromTwainDeviceButton" value="Acquire images from TWAIN device" disabled />

                <h3>Preview of scanned image</h3>
                <input type="image" id="previewImage" alt="Preview of scanned image" />
                <br />
                <br />
                <a id="vintasoftWebTwainServiceInstallerLinkId" href="https://www.vintasoft.com/zip/VintasoftWebTwainService-15.0.5.zip" hidden>Download installer of VintaSoft Web TWAIN service</a>
            </div>
        );
    }

    componentDidMount() {
        // declare reference to the Vintasoft namespace
        let Vintasoft = window.Vintasoft;

        // get the list of available TWAIN devices
        __getTwainDeviceList();


        /**
         * Returns the list of available TWAIN devices.
         */
        function __getTwainDeviceList() {
          __registerVintasoftWebTwainService();

          var twainDeviceManager = __openTwainDeviceManager();
          if (twainDeviceManager == null)
            return;

          var twainDeviceListSelectElement = document.getElementById('twainDeviceList');
          // clear the device list
          twainDeviceListSelectElement.options.length = 0;

          var twainDevices = null;
          var twainDevice = null;
          try {
            // get an array of available TWAIN devices
            twainDevices = twainDeviceManager.get_Devices();

            // get the default TWAIN device
            twainDevice = twainDeviceManager.get_DefaultDevice();

            // for each TWAIN device
            for (var i = 0; i < twainDevices.length; i++) {
                // add the device info to the device list
                twainDeviceListSelectElement.options.length = twainDeviceListSelectElement.options.length + 1;
                twainDeviceListSelectElement.options[i].text = twainDevices[i].get_DeviceName();
                // if device is default device
                if (twainDevices[i].get_DeviceName() === twainDevice.get_DeviceName())
                    // select device in device selection element
                    twainDeviceListSelectElement.options[i].selected = true;
            }

            if (twainDevices.length > 0) {
              var acquireImagesFromTwainDeviceButton = document.getElementById("acquireImagesFromTwainDeviceButton");
              acquireImagesFromTwainDeviceButton.disabled = false;

              acquireImagesFromTwainDeviceButton.addEventListener('click', event => {
                  __acquireImagesFromTwainDevice();
              });
            }
          }
          catch (ex) {
            alert(ex);
          }
          finally {
            // close the device manager
            twainDeviceManager.close();
          }
        }

        /**
         * Acquires images from TWAIN device.
         */
        function __acquireImagesFromTwainDevice() {
            var acquireImagesFromTwainDeviceButton = document.getElementById("acquireImagesFromTwainDeviceButton");
            acquireImagesFromTwainDeviceButton.disabled = true;

            var twainDeviceListSelectElement = document.getElementById('twainDeviceList');
            var twainDeviceIndex = twainDeviceListSelectElement.selectedIndex;
            // if TWAIN device manager does not have TWAIN devices
            if (twainDeviceIndex == -1) {
              alert('TWAIN device manager does not have TWAIN devices.');
              acquireImagesFromTwainDeviceButton.disabled = false;
              return;
            }

            var twainDeviceName = twainDeviceListSelectElement.value;
            if (twainDeviceName == null) {
              alert('TWAIN device name is not found.');
              acquireImagesFromTwainDeviceButton.disabled = false;
              return;
            }            

            // open TWAIN device manager
            var twainDeviceManager = __openTwainDeviceManager();

            var twainDevices = null;
            var twainDevice = null;
            try {
                // get an array of available TWAIN devices
                twainDevices = twainDeviceManager.get_Devices();

                // for each TWAIN device
                for (var i = 0; i < twainDevices.length; i++) {
                    if (twainDevices[i].get_DeviceName() === twainDeviceName)
                        twainDevice = twainDevices[i];
                }

                if (twainDevice == null) {
                  alert('TWAIN device is not found.');
                  acquireImagesFromTwainDeviceButton.disabled = false;
                  return;
                }

                // open TWAIN device (do not display device UI but display dialog with image scanning progress)
                twainDevice.open(false, true);

                var acquireModalState;
                do {
                    // do one step of modal image acquisition process
                    var acquireModalResult = twainDevice.acquireModalSync();
                    // get state of image acquisition
                    acquireModalState = acquireModalResult.get_AcquireModalState().valueOf();

                    switch (acquireModalState) {
                        case 2:   // image is acquired
                            // get acquired image
                            var acquiredImage = acquireModalResult.get_AcquiredImage();
                            // get image as Base64 string
                            var bitmapAsBase64String = acquiredImage.getAsBase64String();
                            // update image preview
                            var previewImageElement = document.getElementById('previewImage');
                            previewImageElement.src = bitmapAsBase64String;
                            break;
                        case 4:   // scan is failed
                            alert(acquireModalResult.get_ErrorMessage());
                            break;
                        case 9:   // scan is finished
                            break;
                    }
                }
                while (acquireModalState !== 0);
            }
            catch (ex) {
                alert(ex);
            }
            finally {
                if (twainDevice != null) {
                    // close the device
                    twainDevice.close();
                }
                // close the device manager
                twainDeviceManager.close();
            }
        }

        function __registerVintasoftWebTwainService() {
            // register the evaluation version of VintaSoft Web TWAIN service
            // please read how to get evaluation license in documentation: https://www.vintasoft.com/docs/vstwain-dotnet-web/Licensing-Twain_Web-Evaluation.html
            Vintasoft.Twain.WebTwainGlobalSettingsJS.register('REG_USER', 'REG_URL', 'REG_CODE', 'EXPIRATION_DATE');
        }

        function __openTwainDeviceManager() {
            // URL to the VintaSoft Web TWAIN service
            var serviceUrl = 'https://localhost:25329/api/VintasoftTwainApi';
            // a Web API controller that allows to work with TWAIN devices
            var twainService = new Vintasoft.Shared.WebServiceControllerJS(serviceUrl);

            // TWAIN device manager
            var twainDeviceManager = new Vintasoft.Twain.WebTwainDeviceManagerJS(twainService);

            // the default settings of TWAIN device manager
            var deviceManagerInitSetting = new Vintasoft.Twain.WebTwainDeviceManagerInitSettingsJS();

            try {
                // open TWAIN device manager
                twainDeviceManager.open(deviceManagerInitSetting);
            }
            catch (ex) {
                if (ex.toString().startsWith('NetworkError')) {
                    document.getElementById('vintasoftWebTwainServiceInstallerLinkId').hidden = false;
                    alert("VintaSoft Web TWAIN service is not found.\n\nPlease close this dialog, link 'Download installer of VintaSoft Web TWAIN service' will appear at the top of this page, click the link, download VintaSoft Web TWAIN Service, manually install the service on your computer, reload this web page in web browser (Firefox must be restarted) and try to scan images once again.");
                }
                else
                    alert(ex);
                return null;
            }
            return twainDeviceManager;
        }
    }

}

Read how to get the evaluation license for VintaSoft TWAIN .NET SDK here https://www.vintasoft.com/docs/vstwain-dotnet-web/Licensing-Twain_Web-Evaluation.html and get the evaluation license.
Embed JavaScript code with your evaluation license instead of code line "Vintasoft.Twain.WebTwainGlobalSettingsJS.register('REG_USER', 'REG_URL', 'REG_CODE', 'EXPIRATION_DATE');" in "src\components\vintasoft-web-twain.js" file.

Specify that React.js application must open "VintasoftWebTwain" component. For doing this please change JavaScript code of "src\App.js" file to the following JavaScript code:

JavaScript

import { VintasoftWebTwain } from "./components/VintasoftWebTwain";

function App() {
        return (
                <div className="App">
                        <VintasoftWebTwain />
                </div>
        );
}

export default App;

Run the React.js application and see the result.
Run the React.js application using the following console command:
- Console
```
npm start
```
If VintaSoft Web TWAIN service is installed on your computer, you will see the following result:

If VintaSoft Web TWAIN service is not installed on your computer (you see an alert with error message), you need to do the following steps:
- click the "Download installer of VintaSoft Web TWAIN service" link
- download the installer of VintaSoft Web TWAIN service to your computer
- install the VintaSoft Web TWAIN service to your computer
- reload the application page in web browser

Send Feedback

Install Node.js and npm client to your computer.

Create a new React.js application.

Copy Vintasoft JS- and TS-files to the React.js application.

Create VintasoftWebTwain component in React.js application.

Run the React.js application and see the result.